1、处理表格单元格函数:

 //设置单元格
getSpanArr(list) {
    // 先给所有的数据都加一个v.rowspan = 1
    list.forEach(item => {
        item.rowspan = 1;
        item.rowspan1 = 1;
        // 有几列想合并就设置几个
        ...........
    });
    // 双层循环
    for (let i = 0; i < list.length; i++) {
        for (let j = i + 1; j < list.length; j++) {
            //此处可根据相同字段进行合并
            if (list[i].XXX== list[j].XXX) {
                list[i].rowspan++;
                list[j].rowspan--;
            }
            if (list[i].XXX== list[j].XXX) {
                list[i].rowspan1++;
                list[j].rowspan1--;
            }
        }
        // 这里跳过已经重复的数据
        i = i + list[i].rowspan - 1;
        i = i + list[i].rowspan1 - 1;
    }
    this.tableData = list;
},

2.开始调用:

created(){
    this.getSpanArr(表格数据)
}

3.table标签添加合并单元格函数:

:span-method="ObjectSpanMethod"

4.合并单元格函数:

// 合并单元格相同内容
ObjectSpanMethod({ row, column, rowIndex, columnIndex }) {
    // 第一列
    if (columnIndex === 0) {
        return {
            rowspan: row.rowspan,
            colspan: 1,
        };
    }
    // 第二列
    if (columnIndex === 1) {
        return {
            rowspan: row.rowspan1,
            colspan: 1,
        };
    }
    // row.XXX的值跟上述函数对应
    .........
},

GitHub 加速计划 / eleme / element
15
2
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐