elementUI 表格合并单元格-多层级-合并行

elementUI 表格合并单元格-多层级-合并行

需求：使用vue + elementUI 实现如下表格：

省份	城市	区域	人口
贵州	遵义	汇川区	100
		红花岗区	100
		播州区	100
	贵阳	南明区	100
		云岩区	100
	安顺	西秀区	100
		平坝区	100
		开发区	100
	铜仁	万山区	100
广东	深圳	南山区	100

实现:

• html部分

<el-table :data="tableData" :span-method="objectSpanMethod">
  <el-table-column v-for="column in columns" :key="column.field" :prop="column.field" :label="column.name">
	<template slot-scope="scope">
		{{scope.row[column.field]}}
	</template>
  </el-table-column>
</el-table>

• js部分

export default {
    data() {
        return {
            tableData: [
                ...
                ...
            ],
            column: [
                {
                    name: '省份',
                    field: 'province',
                },
                {
                    name: '城市',
                    field: 'city',
                },
                {
                    name: '区域',
                    field: 'region',
                },
                {
                    name: '人口',
                    field: 'population',
                },
             ],
        }
    },
    created(){
        //使用loadsh排序函数先对省份和城市进行排序。
        this.tableData = _.orderBy(this.tableData,['province','city'],['desc','desc']);
        //计算需要合并的行数先合并province，在合并city
        this.setTabelRowSpan(this.tableData, ['province','city']);
    },
    methods: {
        setTabelRowSpan(tableData, fieldArr){
            let lastItem = {};
            fieldArr.forEach((field, index) => {
                tableData.forEach(item => {
                    item.mergeCell = fieldArr;
                    const rowSpan = `rowspan_${field}`
                    //判断是否合并到上个单元格。
                    if(fieldArr.slice(0, index + 1).every(e => lastItem[e] == item[e])){
                        //是：合并行
                        item[rowSpan] = 0;
                        lastItem[rowSpan] += 1;
                    }else{
                        //否：完成一次同类合并。lastItem重新赋值，进入下一次合并计算。
                        item[rowSpan] = 1;
                        lastItem = item;
                    }
                })
            })
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            //判断当前单元格是否需要合并
            if(row.mergeCell.includes(column.property)){
                const rowspan = row[`rowspan_${column.property}`]
            if (rowspan) {
                return { rowspan: rowspan,colspan: 1};
            } else {
                return { rowspan: 0,colspan: 0};
            }
        },
    }
}