-
在utils文件下创建verticalMergeCell.js文件,内容如下:
const computeMergeCellSpan = (data, column, referenceColumn) => { referenceColumn = referenceColumn ? referenceColumn : column; data.forEach((element, index, array) => { if (element['merge'][column] === 0 || index === array.length - 1) { return; } if (element[referenceColumn] !== array[index + 1][referenceColumn]) { element['merge'][column] = 1; } else if (element[referenceColumn] === array[index + 1][referenceColumn]) { array[index]['merge'][column] = 2; array[index + 1]['merge'][column] = 0; let i = 1; while (index + 1 + i < array.length) { if (element[referenceColumn] === array[index + 1 + i][referenceColumn]) { array[index]['merge'][column]++; array[index + 1 + i]['merge'][column] = 0; i++; } else { i = array.length; } } } }); return data; }; const mergeCellRender = (value, record, column) => { const obj = { children: value, attrs: {}, }; obj.attrs.rowSpan = record['merge'][column]; console.log(obj); return obj; }; export { computeMergeCellSpan, mergeCellRender };
-
在需要引用的地方通过以下代码引入
import { computeMergeCellSpan, mergeCellRender } from '@/utils/verticalMergeCell';
-
对Table的数据源进行处理,代码如下:
-
this.data是Table的数据源,数组类型,对其中的每一个对象增加一个merge属性,类型为对象,代码如下:
merge: {},
加上之后的数据格式类似于:
this.data = [{ columnA: '1111', columnB: '2222', columnC: '3333', columnD: '4444', merge: {}, },{ columnA: '1111', columnB: '2222', columnC: '3333', columnD: '4444', merge: {}, },{ columnA: '1111', columnB: '2222', columnC: '3333', columnD: '4444', merge: {}, }]
-
调用computeMergeCellSpan方法处理数组
this.data = computeMergeCellSpan(this.data, 'columnA');
-
-
在Table的列配置中,增加渲染函数,代码如下:
{ title: '名称', dataIndex: 'columnA', fixed: 'left', width: 80, customRender: (value, record) => { return mergeCellRender(value, record, 'columnA'); }, },
Ant Design Vue Table纵向自动合并单元格
于 2021-01-19 15:26:40 首次发布