ant-design-vue动态合并可编辑表格的解决方法
ant-design-vue官方提供了合并单元格的方式,使用customRender方法可以进行单元格合并:
其中rowSpan为合并行数,mergeRowspan为动态定义合并行数(下面介绍)。具体用法可参考ant-design-vue表格行/列合并
vm.columns = [
{
title: "列名", dataIndex: "aaa",
customRender: (text, row, index) => {
var obj = {
children: text,
attrs: {}
}
if (index % 2 == 0) {
obj.attrs.rowSpan = 2;
} else {
obj.attrs.rowSpan = mergeRowSpan;
}
return obj;
}
},
];
动态定义表格的合并行数
如果需要动态定义表格的合并行数,可以通过定义一个rowSpan()函数,通过合并数据的特殊值如:id作为参数传入,可以根据表格数据动态获取可合并的行数,再将合并后的数据替换表格数据。
rowSpan(dataIndex) {
//过滤合并后现实的表格内容
let arr = this.tableList
.reduce((result, item) => {
//不存在则放入展示结果
if (result.indexOf(item[dataIndex]) < 0) {
result.push(item[dataIndex]);
}
return result;
}, [])
//确定每个合并的合并行数
.reduce((result, keys) => {
//计算出可以合并的数据
const children = this.tableList.filter((item) => item[dataIndex] === keys);
result = result.concat(
//计算出合并行数
children.map((item, index) => ({
...item,
[`mergeRowSpan`]: index === 0 ? children.length : 0,
}))
);
return result;
}, []);
//将最后展示的数据替换原数据
this.tableList = arr;
},
编辑表格单元格内容
如果需要编辑表格单元格内容的话,可以参考官方的ant-design-vue可编辑单元格。
通过分析ant-design-vue可编辑单元格和合并单元的实现方法,我们可以发现分别是使用scopedSlots和customRender来实现的,这两个实际上不不能共用的。
这就会出现一个问题:动态合并可编辑的单元格怎么实现呢?使用JSX。
动态合并可编辑单元格
通过JSX语法来解决scopedSlots和customRender冲突的问题,具体语法自行查阅官方文档。解决动态合并可编辑的单元格时查了很多网上的资料,但都只涉及简单的定义事件,不能满足自定义需求。
合并单元格的可编辑实现,可以在下列代码obj中children中添加自定义可编辑子组件editable-cell,其中有text为绑定数据,可以通过text={value}传入,vue的数据绑定语法在此报错,参考JXS语法。如果需要接受可编辑子组件传过来的值并触发函数,可以通过函数直接调用触发事件。网上涉及的几种方式在验证时只会在渲染时触发,不能在编辑时触发相应事件。
{
title: '图片张数',
dataIndex: 'photoCount',
scopedSlots: { customRender: 'photoCount' },
// 合并单元格
customRender: (value, row, index) => {
const obj = {
// onCellChange为编辑时处罚的事件
children: <editable-cell text={value} onChange={(val) => this.onCellChange(row.id,'photoCount',val)}></editable-cell>,
attrs: {
rowSpan: row.draftRowSpan, //合并单元格数(同上mergeRowSpan动态生成)
},
};
obj.attrs.rowSpan = row.draftRowSpan
return obj;
},
},