elementUI table表格相同元素合并行----支持多列

效果图如下:

vue2代码如下:
只粘贴了js方法哦,

复制代码
methods: {

// 设置合并行

setrowspans() {

const columns = ['name', 'value']; // 需要合并的列名

// 为每个需要合并的列设置默认 rowspan

this.tableData.forEach(row => {

columns.forEach(col => {

row[col + 'Rowspan'] = 1; // 例如:row['name1Rowspan'] = 1

});

});

复制代码
columns.forEach((col, index) => {
    for (let i = 0; i < this.tableData.length; i++) {
        // 这里进行判断
        // 如果当前行的列数据和下一行的列数据相等
        // 就把当前rowspan + 1,下一行的rowspan - 1
        for (let j = i + 1; j < this.tableData.length; j++) {
            if (this.tableData[i][col] === this.tableData[j][col]) {
                this.tableData[i][col + 'Rowspan']++;
                this.tableData[j][col + 'Rowspan']--;
            } else {
                break; // 如果不相等,跳出循环,因为已经没有相同的了
            }
        }
        // 这里跳过已经重复的数据
        i = i + this.tableData[i][col + 'Rowspan'] - 1;
    }
});

},

// 合并行

arraySpanMethod({ row, column, rowIndex, columnIndex }) {

// 根据列索引决定合并哪一列

if (columnIndex === 1 || columnIndex === 3) { // 这里可能需要调整,根据你实际的列数

return {

rowspan: row[column.property + 'Rowspan'],

colspan: 1

};

}

}

相关推荐
知识分享小能手9 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
萌萌哒草头将军10 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy10 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端10 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿10 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉10 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~10 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
xiaoyan201513 小时前
Electron38-Winchat聊天系统|vite7+electron38+vue3电脑端聊天Exe
vue.js·electron·vite
reembarkation13 小时前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
给月亮点灯|13 小时前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js