vue3、Ant Design Vue表格组件单元格行合并
2024-01-10 11:29:29
效果如下图所示,只合并相邻相同行
列表数据: 0不显示 1独占一行 其它如3合并3行
export const columns: BasicColumn[] = [
{
title: '用途层级1',
align: 'center',
width: 100,
dataIndex: 'useLevel1',
customCell: (record, index, column) => {
return { rowSpan: record.useLevel1Rowspan ?? 1 };
},
},
{
title: '用途层级2',
align: 'center',
width: 100,
dataIndex: 'useLevel2',
customCell: (record, index, column) => {
return { rowSpan: record.useLevel2Rowspan ?? 1 };
},
},
{
title: '用途层级3',
align: 'center',
width: 100,
dataIndex: 'useLevel3',
customCell: (record, index, column) => {
return { rowSpan: record.useLevel3Rowspan ?? 1 };
},
},
{
title: '用途层级4',
align: 'center',
width: 100,
dataIndex: 'useLevel4',
customCell: (record, index, column) => {
return { rowSpan: record.useLevel4Rowspan ?? 1 };
},
},
{
title: '能源类别',
align: 'center',
width: 100,
dataIndex: 'energyType',
}
]
组件内使用
import { columns } from './jsfile.data';
let newTableData = reactive([]);
// 是否已经合并防止重复监听
let isMerge = ref(false);
// 需要合并的属性列
const needTomergeColumnsIndex = ['useLevel1', 'useLevel2', 'useLevel3', 'useLevel4'];
// 监听表格数据
watch(tableDataSource, async (newTableDataSource) => {
if (newTableDataSource && newTableDataSource.length > 1 && !isMerge.value) {
let tableData = newTableDataSource;
isMerge.value = true;
// 遍历需要合并的属性列
await needTomergeColumnsIndex.forEach((columnDataIndex) => {
// 存储结果和计算每个属性的出现次数。
const dynamicVariables = {};
// 属性的Rowspan,分别表示该对象在需要合并列属性上的rowspan 值
const variableName = columnDataIndex + 'Rowspan';
// 计算每个属性的 rowspan
tableData.forEach((item, index) => {
dynamicVariables[variableName] = 0;
if (tableData[index - 1] && item[columnDataIndex] === tableData[index - 1][columnDataIndex]) {
dynamicVariables[variableName] = 0;
} else {
for (let i = index; i < tableData.length; i++) {
if (tableData[i][columnDataIndex] === item[columnDataIndex]) {
dynamicVariables[variableName]++;
} else {
break;
}
}
}
item[variableName] = dynamicVariables[variableName];
});
console.log(tableData);
});
// 表格赋具有合并属性的新值
newTableData = tableData;
}
});
文章来源:https://blog.csdn.net/qq_42657934/article/details/135472046
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!