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
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 6 个月前
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 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐