本文摘要
该示例展示在泛微 Ecology ecode 中通过覆盖 Table 组件属性,实现建模查询表格按年月动态生成列的效果。核心做法是识别指定查询路径后,过滤排序年月数据,将业务数据转置,再动态替换表头与数据源。代码为半成品,需读者按实际场景调整。
效果图
原始数据:

开启ecode后展示样式:

#代码: 注:本代码为半成品,请自行修改
ecodeSDK.overwritePropsFnQueueMapSet('Table', { fn: (newProps) => { console.log('!找到组件啦!!!!!!');
// 检查路径是否正确 if (!ecodeSDK.checkLPath('/spa/cube/index.html#/main/cube/search?customid=77')) return; console.log("路径识别正确!", newProps);
// 数据过滤和排序 const validDataSource = newProps.dataSource.filter(row => row.ny && row.ny !== "未定义");
// 提取所有有效的年月并排序 const nyValues = Array.from(new Set(validDataSource.map(row => row.ny))) .filter(ny => ny) // 过滤未定义的年月 .sort((a, b) => new Date(a) - new Date(b)); // 按时间升序排序
console.log("有效的年月字段:", nyValues);
// 数据转置处理 const processedData = {}; validDataSource.forEach(row => { const cswb = row.cswb || "未定义"; const ny = row.ny; const csxs = row.csxs || 0;
if (!processedData[cswb]) { processedData[cswb] = { cswb }; } processedData[cswb][ny] = csxs; });
// 转换为数组形式,便于表格展示 const transformedData = Object.values(processedData);
// 动态生成新的表头 const dynamicColumns = [ { title: "测试文本", dataIndex: "cswb", key: "cswb", width: "20%" }, ...nyValues.map(ny => ({ title: ny, dataIndex: ny, key: ny, width: "10%" })) ];
// 更新表格的列配置和数据源 newProps.columns = dynamicColumns; newProps.dataSource = transformedData;
console.log("处理后的数据:", transformedData); console.log("处理后的列:", dynamicColumns); },});