vue a-table 实现相同数据合并行
- 实现效果
- 代码实现
- cloums数据格式
- 数据源格式
- 合并代码
实现效果
代码实现
cloums数据格式
const getColumns = function () {
return [
{
title: "分类",
dataIndex: "checked",
width: "150px",
customRender: (text, row, index) => {
return {
children:"文字",//合并行的标题
attrs: {
// 合并行 含col字段则合并,其他的必须设置为0!!
rowSpan: row.col ? row.col : 0,
},
};
},
},
];
}
数据源格式
我们这里把相同的checked字段值进行合并
[
{
"id": "65d45",
"checked": "档案管理"
},
{
"id": "65346",
"checked": "档案管理"
},
{
"id": "6514d",
"checked": "动态监控"
},
{
"id": "65d83",
"checked": "动态监控"
}
]
合并代码
export const dealList = (arr) => {
const list = arr
.filter((item) => item.checked)
.map((item) => {
return {
...item,
col: 0,
};
})
.sort(function (a, b) {
return (a.checked + "").localeCompare(b.checked + "");
});
// sort进行排序,方便计算
const colList = [];
arr.map((o) => {
const arr = indexcount(list, o.checked);
colList.push({
col: arr.length,
idex: arr[0],
});
});
list.map((o, index) => {
colList.map((m) => {
if (index === m.idex) {
o.col = m.col;
}
});
});
return list;
};
// 出现次数
function indexcount(arr, item) {
var arr1 = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i].checked == item) {
arr1.push(i);
}
}
return arr1;
}