vue-ant-design:a-table使用合并单元格以及合并后数据错位
vue-ant-design:a-table使用合并单元格以及合并后数据错位
·
首先合并单元格是表格功能中常见的问题,其中会有很多的坑,今天在做这个功能的时候,就陷入了很多的误区,下面就为大家罗列我遇到过的问题,
1、通过接口取数据渲染表格的时候,无法确认某个字段的值相同的数据有多少条时,要做的就是改造数据,或者让接口返回的时候带着(大神有什么更好的办法,勿喷)
2、合并行的时候,最需要注意的就是你合并的单元格是采用的第几行数据,除了这行数据之外的相同值的数据要是使用colSpan = 0去设置不显示,
下面是一段代码示例,希望对大家有所帮助
columns = [
{
title: '主营单位',
key: 'mainDept',
dataIndex: 'mainDept',
align: 'center',
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {},
};
if (index === 2) {
obj.attrs.rowSpan = 2;
}
// These two are merged into above cell
if (index === 3) {
obj.attrs.rowSpan = 0;
}
if (index === 4) {
obj.attrs.colSpan = 0;
}
return obj;
},
]
更多推荐
已为社区贡献1条内容
所有评论(0)