antd + vue Table合并单元格

使用antd + vue + Table 实现合并单元格

// 函数-合并单元格
 const changeData = (data1: any, index: any) => {
   let count = 0;
   let indexCount = 1;
   let field = '';
   if (index == 1) {
     field = 'oneTargetName';
   } else if (index == 2) {
     field = 'twoTargetName';
   } else if (index == 3) {
     field = 'threeTargetName';
   } else if (index == 4) {
     field = 'fourTargetName';
   }
   try {
     while (indexCount < data1.length) {
       let item = data1.slice(count, count + 1)[0];
       if (!item['rowSpan' + index]) {
         item['rowSpan' + index] = 1;
         // item['assessResult' + index] = item.assessResult;
         // console.log(item.targetName, item.assessResult);
       }
       if (item[field] === data1[indexCount][field]) {
         item['rowSpan' + index]++;
         data1[indexCount]['rowSpan' + index] = 0;
       } else {
         count = indexCount;
       }
       indexCount++;
     }
   } catch {}
   return data1;
 };

用法：

for (let i = 0; i < res.response.modelLevel - 1; i++) {    //res.response.modelLevel  层级
  lists = changeData(lists, i + 1);
}
dataSource.value = lists;

lists数据格式：

lists = [
	{
		id: "e7534e2edaaf421db981c25d475b11e1"
		oneTargetId: "5e07f9b16564485293f98ab5791129d8"
		oneTargetName: "兵役征集"
		targetId: "f9a93154c29f48a083779c97a73c2f09"
		targetName: "适龄青年征集率评分"
		targetSort: 3
		targetType: "叶级指标"
		twoTargetId: "3680223777614a698e036adc6ddd078d"
		twoTargetName: "济南"
		weight: 0.1
	}
]

合并后：
lists = [
	{
		id: "e7534e2edaaf421db981c25d475b11e1"
		oneTargetId: "5e07f9b16564485293f98ab5791129d8"
		oneTargetName: "兵役征集"
		rowSpan1: 0    //合并单元格字段
		rowSpan2: 0    //合并单元格字段
		targetId: "f9a93154c29f48a083779c97a73c2f09"
		targetName: "适龄青年征集率评分"
		targetType: "叶级指标"
		twoTargetId: "3680223777614a698e036adc6ddd078d"
		twoTargetName: "济南"
		weight: 0.1
	}
]

columns = [
	{
	  title: '一级指标',
	  align: 'center',
	  children: [
	    {
	      title: '指标名称',
	      dataIndex: 'oneTargetName',
	      key: 'age',
	      align: 'center',
	      width: 100,
	      customCell: (_, index) => ({
	        rowSpan: _.rowSpan1,     //合并单元格
	      }),
	      customRender: ({ text }) => {
	        return <div style={{ whiteSpace: 'pre-wrap' }}>{text}</div>;
	      },
	    },
	 ],  
	},
]