处理思路：在parseData方法中处理接口返回的动态数据，将动态数据处理成前端需要展示的格式展示。
javascript
/**
* 渲染商贸行业（批发/零售/住宿/餐饮）分季度数据表格
* 核心功能：通过接口获取数据，处理成复杂表头所需的结构化数据，渲染到指定DOM节点
*/
commonTable.rendertable({
// 绑定表格渲染的DOM元素ID（页面中需存在id="currentTableId"的容器）
elem: '#currentTableId',
// 表格唯一标识ID，用于后续操作表格（如刷新、重载）
id: 'currentTableId',
// 数据接口地址，请求参数rows=200表示获取200条数据（关闭分页后一次性加载）
url: '/slzdymb/Qshshy/GetReportJson?rows=200',
// 关闭分页功能（因数据量小，一次性加载所有地区数据）
page: false,
// 表格列配置（复杂表头：3行表头， rowspan/colspan 合并单元格）
cols: [
// 第一行表头：一级分类（行业大类）
[
// 地区列：占3行（rowspan=3），居中显示
{ field: 'F_AreaName', title: '地区', align: 'center', rowspan: 3 },
// 批发业列：合并16列（4个季度×4个指标），居中显示
{ title: '批发业', colspan: 16, align: 'center' },
// 零售业列：合并16列，居中显示
{ title: '零售业', colspan: 16, align: 'center' },
// 住宿业列：合并16列，居中显示
{ title: '住宿业', colspan: 16, align: 'center' },
// 餐饮业列：合并16列，居中显示
{ title: '餐饮业', colspan: 16, align: 'center' }
],
// 第二行表头：二级分类（季度）
[
// 批发业-一季度：合并4列（总量/占比/增速/贡献率）
{ title: '一季度', colspan: 4, align: 'center' },
// 批发业-上半年：合并4列
{ title: '上半年', colspan: 4, align: 'center' },
// 批发业-前三季度：合并4列
{ title: '前三季度', colspan: 4, align: 'center' },
// 批发业-全年：合并4列
{ title: '全年', colspan: 4, align: 'center' },
// 零售业-一季度：合并4列
{ title: '一季度', colspan: 4, align: 'center' },
// 零售业-上半年：合并4列
{ title: '上半年', colspan: 4, align: 'center' },
// 零售业-前三季度：合并4列
{ title: '前三季度', colspan: 4, align: 'center' },
// 零售业-全年：合并4列
{ title: '全年', colspan: 4, align: 'center' },
// 住宿业-一季度：合并4列
{ title: '一季度', colspan: 4, align: 'center' },
// 住宿业-上半年：合并4列
{ title: '上半年', colspan: 4, align: 'center' },
// 住宿业-前三季度：合并4列
{ title: '前三季度', colspan: 4, align: 'center' },
// 住宿业-全年：合并4列
{ title: '全年', colspan: 4, align: 'center' },
// 餐饮业-一季度：合并4列
{ title: '一季度', colspan: 4, align: 'center' },
// 餐饮业-上半年：合并4列
{ title: '上半年', colspan: 4, align: 'center' },
// 餐饮业-前三季度：合并4列
{ title: '前三季度', colspan: 4, align: 'center' },
// 餐饮业-全年：合并4列
{ title: '全年', colspan: 4, align: 'center' },
],
// 第三行表头：三级分类（具体指标）+ 数据字段绑定
[
// ===================== 批发业 =====================
// 一季度指标
{ field: 'F_PFY_1_ZL', title: '总量', align: 'center' },
{ field: 'F_PFY_1_ZB', title: '占比', align: 'center' },
{ field: 'F_PFY_1_ZS', title: '增速', align: 'center' },
{ field: 'F_PFY_1_GXL', title: '贡献率', align: 'center' },
// 上半年指标
{ field: 'F_PFY_2_ZL', title: '总量', align: 'center' },
{ field: 'F_PFY_2_ZB', title: '占比', align: 'center' },
{ field: 'F_PFY_2_ZS', title: '增速', align: 'center' },
{ field: 'F_PFY_2_GXL', title: '贡献率', align: 'center' },
// 前三季度指标
{ field: 'F_PFY_3_ZL', title: '总量', align: 'center' },
{ field: 'F_PFY_3_ZB', title: '占比', align: 'center' },
{ field: 'F_PFY_3_ZS', title: '增速', align: 'center' },
{ field: 'F_PFY_3_GXL', title: '贡献率', align: 'center' },
// 全年指标
{ field: 'F_PFY_4_ZL', title: '总量', align: 'center' },
{ field: 'F_PFY_4_ZB', title: '占比', align: 'center' },
{ field: 'F_PFY_4_ZS', title: '增速', align: 'center' },
{ field: 'F_PFY_4_GXL', title: '贡献率', align: 'center' },
// ===================== 零售业 =====================
// 一季度指标
{ field: 'F_LSY_1_ZL', title: '总量', align: 'center' },
{ field: 'F_LSY_1_ZB', title: '占比', align: 'center' },
{ field: 'F_LSY_1_ZS', title: '增速', align: 'center' },
{ field: 'F_LSY_1_GXL', title: '贡献率', align: 'center' },
// 上半年指标
{ field: 'F_LSY_2_ZL', title: '总量', align: 'center' },
{ field: 'F_LSY_2_ZB', title: '占比', align: 'center' },
{ field: 'F_LSY_2_ZS', title: '增速', align: 'center' },
{ field: 'F_LSY_2_GXL', title: '贡献率', align: 'center' },
// 前三季度指标
{ field: 'F_LSY_3_ZL', title: '总量', align: 'center' },
{ field: 'F_LSY_3_ZB', title: '占比', align: 'center' },
{ field: 'F_LSY_3_ZS', title: '增速', align: 'center' },
{ field: 'F_LSY_3_GXL', title: '贡献率', align: 'center' },
// 全年指标
{ field: 'F_LSY_4_ZL', title: '总量', align: 'center' },
{ field: 'F_LSY_4_ZB', title: '占比', align: 'center' },
{ field: 'F_LSY_4_ZS', title: '增速', align: 'center' },
{ field: 'F_LSY_4_GXL', title: '贡献率', align: 'center' },
// ===================== 住宿业 =====================
// 一季度指标
{ field: 'F_ZSY_1_ZL', title: '总量', align: 'center' },
{ field: 'F_ZSY_1_ZB', title: '占比', align: 'center' },
{ field: 'F_ZSY_1_ZS', title: '增速', align: 'center' },
{ field: 'F_ZSY_1_GXL', title: '贡献率', align: 'center' },
// 上半年指标
{ field: 'F_ZSY_2_ZL', title: '总量', align: 'center' },
{ field: 'F_ZSY_2_ZB', title: '占比', align: 'center' },
{ field: 'F_ZSY_2_ZS', title: '增速', align: 'center' },
{ field: 'F_ZSY_2_GXL', title: '贡献率', align: 'center' },
// 前三季度指标
{ field: 'F_ZSY_3_ZL', title: '总量', align: 'center' },
{ field: 'F_ZSY_3_ZB', title: '占比', align: 'center' },
{ field: 'F_ZSY_3_ZS', title: '增速', align: 'center' },
{ field: 'F_ZSY_3_GXL', title: '贡献率', align: 'center' },
// 全年指标
{ field: 'F_ZSY_4_ZL', title: '总量', align: 'center' },
{ field: 'F_ZSY_4_ZB', title: '占比', align: 'center' },
{ field: 'F_ZSY_4_ZS', title: '增速', align: 'center' },
{ field: 'F_ZSY_4_GXL', title: '贡献率', align: 'center' },
// ===================== 餐饮业 =====================
// 一季度指标
{ field: 'F_CYY_1_ZL', title: '总量', align: 'center' },
{ field: 'F_CYY_1_ZB', title: '占比', align: 'center' },
{ field: 'F_CYY_1_ZS', title: '增速', align: 'center' },
{ field: 'F_CYY_1_GXL', title: '贡献率', align: 'center' },
// 上半年指标
{ field: 'F_CYY_2_ZL', title: '总量', align: 'center' },
{ field: 'F_CYY_2_ZB', title: '占比', align: 'center' },
{ field: 'F_CYY_2_ZS', title: '增速', align: 'center' },
{ field: 'F_CYY_2_GXL', title: '贡献率', align: 'center' },
// 前三季度指标
{ field: 'F_CYY_3_ZL', title: '总量', align: 'center' },
{ field: 'F_CYY_3_ZB', title: '占比', align: 'center' },
{ field: 'F_CYY_3_ZS', title: '增速', align: 'center' },
{ field: 'F_CYY_3_GXL', title: '贡献率', align: 'center' },
// 全年指标
{ field: 'F_CYY_4_ZL', title: '总量', align: 'center' },
{ field: 'F_CYY_4_ZB', title: '占比', align: 'center' },
{ field: 'F_CYY_4_ZS', title: '增速', align: 'center' },
{ field: 'F_CYY_4_GXL', title: '贡献率', align: 'center' }
]
],
/**
* 数据解析函数：将接口返回的原始数据处理为表格所需的结构化数据
* @param {Object} res - 接口返回的原始数据
* @returns {Object} 符合layui table要求的格式化数据
*/
parseData: function (res) {
// 打印原始数据，便于调试（生产环境可注释）
console.log('接口原始返回数据', res)
// 初始化表格最终渲染的数据列表
let tableDataList = [];
// 判空：确保原始数据存在且有值
if (res.data != null && res.data.length > 0) {
// 遍历地区列表（每行对应一个地区）
res.areaList.forEach((areaItem) => {
// 初始化当前地区的行数据：先赋值地区名称
let tableData = { F_AreaName: areaItem };
// 遍历行业列表（批发/零售/住宿/餐饮）
res.industry.forEach((industryItem) => {
// 遍历季度列表（1/2/3/4 对应一季度/上半年/前三季度/全年）
res.quarter.forEach((quarterItem) => {
// 筛选当前地区+当前行业+当前季度的匹配数据
let filterArray = res.data.filter(item =>
item.F_AreaName == areaItem && // 地区匹配
item.F_IndustryType == industryItem.Key && // 行业类型匹配
item.F_Quarter == quarterItem.Key); // 季度匹配
// 打印筛选结果，便于调试
console.log(`筛选【${areaItem}-${industryItem.Description}-${quarterItem.Key}】的数据`, filterArray)
// 判空：确保筛选到有效数据
if (filterArray != null && filterArray.length > 0) {
// 动态拼接字段名（如 F_PFY_1_ZL），并赋值对应指标值
// 字段命名规则：F_ + 行业描述 + _ + 季度Key + _ + 指标后缀（ZL/ZB/ZS/GXL）
tableData['F_' + industryItem.Description + '_' + quarterItem.Key + '_ZL'] = filterArray[0].F_Total || 0; // 总量
tableData['F_' + industryItem.Description + '_' + quarterItem.Key + '_ZB'] = filterArray[0].F_Proportion || 0; // 占比
tableData['F_' + industryItem.Description + '_' + quarterItem.Key + '_ZS'] = filterArray[0].F_Rate || 0; // 增速
tableData['F_' + industryItem.Description + '_' + quarterItem.Key + '_GXL'] = filterArray[0].F_AccountFor || 0; // 贡献率
}
});
});
// 将当前地区的行数据加入最终列表
tableDataList.push(tableData)
});
}
// 打印最终处理后的表格数据，便于调试
console.log('处理后表格渲染数据', tableDataList)
// 返回layui table要求的格式化数据结构
return {
"code": res.state, // 接口状态码（0成功/非0失败）
"msg": res.message, // 接口提示信息
"count": res.count, // 数据总条数（关闭分页后可忽略，但需返回）
"data": tableDataList // 最终渲染的表格数据
};
}
});