ant design vue 中的 Table 组件如何合并行
根据Ant Design Vue - Table 表格,表格行/列合并。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。属性customRender:生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引,@return 里面可以设置表格行/列合并,可参考 demo 表格行/列合并。const temp =
·
根据 Ant Design Vue - Table 表格,表格行/列合并。
表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。
属性 customRender:生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引,@return 里面可以设置表格行/列合并,可参考 demo 表格行/列合并。
const temp = {}; // 当前重复的值,支持多列
const mergeCellKey = (text, array, columns) => {
let i = 0;
if (text !== temp[columns]) {
temp[columns] = text;
array.forEach((item) => {
if (item.key === temp[columns]) {
i += 1;
}
});
}
return i;
};
const renderContent = (value, row, index) => {
const obj = {
children: value,
attrs: {},
};
return obj;
};
如何使用呢?
computed: {
columns () {
return [{
title: '序号',
dataIndex: 'key',
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {},
};
obj.attrs.rowSpan = mergeCellKey(row.key, this.dataSource, 'key')
return obj;
},
}, {
title: '说明',
dataIndex: 'settingOne',
customRender: renderContent,
}];
}
},
更多推荐
已为社区贡献60条内容
所有评论(0)