官方文档有说明
image.png
大概意思就是根据行/列的index值，设置index行/列的rowSpan/colSpan的值。其实还是得静心下来慢慢看例子就懂了
现有如下数据类型
records = [
{
"id": 1,
"name": "新增网点",
"code": "new_store",
"userType": 1,
"type": 1,
"typeName": "网点类",
"userTypeName": "业代类"
},
{
"id": 2,
"name": "拜访_门店",
"code": "visit_store",
"userType": 1,
"type": 2,
"typeName": "拜访类",
"userTypeName": "业代类"
},
{
"id": 4,
"name": "拜访_协访",
"code": "visit_store_interview",
"userType": 1,
"type": 2,
"typeName": "拜访类",
"userTypeName": "业代类"
},
{
"id": 5,
"name": "拜访_下属拜访",
"code": "visit_store_subordinate",
"userType": 2,
"type": 2,
"typeName": "拜访类",
"userTypeName": "组长类"
},
{
"id": 6,
"name": "拜访_配送商",
"code": "visit_supplire",
"userType": 2,
"type": 2,
"updateTime": 1629796322000,
"typeName": "拜访类",
"userTypeName": "组长类"
}
]
根据规则，合并行的话，最终的数据结构应该是
"records": [
{
"id": 1,
"name": "新增网点",
"code": "new_store",
"userType": 1,
"type": 1,
"typeName": "网点类",
"userTypeName": "业代类",
"rowSpanTemp": 3
},
{
"id": 2,
"name": "拜访_门店",
"code": "visit_store",
"userType": 1,
"type": 2,
"typeName": "拜访类",
"userTypeName": "业代类",
"rowSpanTemp": 0
},
{
"id": 4,
"name": "拜访_协访",
"code": "visit_store_interview",
"userType": 1,
"type": 2,
"typeName": "拜访类",
"userTypeName": "业代类",
"rowSpanTemp": 0
},
{
"id": 5,
"name": "拜访_下属拜访",
"code": "visit_store_subordinate",
"userType": 2,
"type": 2,
"typeName": "拜访类",
"userTypeName": "组长类",
"rowSpanTemp": 2
},
{
"id": 6,
"name": "拜访_配送商",
"code": "visit_supplire",
"userType": 2,
"type": 2,
"updateTime": 1629796322000,
"typeName": "拜访类",
"userTypeName": "组长类",
"rowSpanTemp": 0
}
]
这里写了一个函数做处理
入参：
data-传入的tabel数组
key-表格的每行数据根据哪个相同字段进行合并（这里是userType）
rowspan: 合并后的数据集的rowSpan的字段（有可能有多列的行需要合并，但是最终要返回的是一个数据，为了避免rowspan重复，所以才加了这个入参）
出参：
function createNewArr(data, key, rowspan) {
if (isArray(data) && data.length === 0) return [];
return data
.reduce((result, item) => {
// 首先将字段作为新数组result取出
if (result.indexOf(item[key]) < 0) {
result.push(item[key]);
}
return result;
}, [])
.reduce((res, name) => {
// 将name相同的数据作为新数组取出，并在其内部添加新字段**rowSpan**
const children = data.filter(item => item[key] === name);
// eslint-disable-next-line no-param-reassign
res = res.concat(
children.map((item, index) => ({
...item,
[rowspan]: index === 0 ? children.length : 0, // 将第一行数据添加rowSpan字段
}))
);
return res;
}, []);
}
createNewArr(record, 'usertype', 'rowSpanTemp')
最后在表格columns渲染列的render那里
render: (value, row, index) => {
const obj = {
children: value,
props: {},
};
obj.props.rowSpan = row.rowSpanTemp
return obj
},
希望能帮助到遇到同样问题的你～～～
另外，不懂reduce用法的小伙伴可以看我的上篇文章https://www.jianshu.com/p/c91d4c8409c0