Vue实战（五）：实现表格的合并行_vue合并行

Vue实战（五）：实现表格的合并行

1、初始化表格布局

<el-table :span-method="arraySpanMethod" :header-cell-style="headFirst" border :data="tableData" :cell-style="{'text-align':'center'}">
	<el-table-column prop="date" label="日期"></el-table-column>
	<el-table-column prop="name" label="姓名"></el-table-column>
	<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
1
2
3
4
5

2、初始化表格数据

data() {
        return {
            tableData: [
                { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1515 弄' },
                { date: '2016-05-01', name: '王大虎', address: '上海市普陀区金沙江路 1516 弄' },
                { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
                { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }
            ],
            mergeObj: {},
            mergeArr: ['date', 'name']
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12

3、实现合并行的方法

methods: {
        rowspan() {
            for (let key of this.mergeArr) {
                let count = 0
                this.mergeObj[key] = []
                this.tableData.forEach((item, index) => {
                    if (index === 0) {
                        this.mergeObj[key].push(1)
                    } else {
                        if (item[key] === this.tableData[index - 1][key]) {
                            this.mergeObj[key][count] += 1
                            this.mergeObj[key].push(0)
                        } else {
                            count = index
                            this.mergeObj[key].push(1)
                        }
                    }
                })
            }
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (this.mergeArr.indexOf(column.property) !== -1) {
                if (this.mergeObj[column.property][rowIndex]) {
                    return {
                        rowspan: this.mergeObj[column.property][rowIndex],
                        colspan: 1,
                    }
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0,
                    }
                }
            } else {
                return {
                    rowspan: 1,
                    colspan: 1,
                }
            }
        },
        headFirst({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 1) {
                return { display: 'none' }
            }
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

4、钩子函数调用方法

mounted() {
        this.rowspan()
    }
1
2
3

5、效果图