The elementui table component merges rows or columns

Time:2021-7-24

introduce

1. Official documents

The official document of the method of merging rows or columns is:

parameter explain type Optional value Default value
span-method Calculation method of merged rows or columns Function({ row, column, rowIndex, columnIndex }) —— ——

You can merge rows or columns by passing the span method method to table. The parameter of the method is an object. The four parameters row, column, rowindex and columnindex are the current row, current column, current row index and current column index respectively.

2. Two return methods

Array:

[1, 2] // merge 1 row and 2 columns

Object:

{
    Rowspan: 3, // merge 3 rows
    ColSpan: 1 // merge 1 column
}

3. Table rendering order

Starting from the first row, rowindex is 0, and the column is from left to right (columnindex is from 0 to the last column); Then, in the second row, rowindex is 1, and the columns are from left to right

4. Empty operation

When merging cells, the system will take the value of the first cell. Element also takes the value of the first cell when operating the cell, but it will not leave the value of the second cell blank, which will result in the extra values not being processed. Therefore, we need to handle it manually, locate the merged row or column, and set its value to blank, that is, return[0, 0]

Demo sharing

Let’s show the effect first

demo1

The elementui table component merges rows or columns

The elementui table component merges rows or columns

demo2

The elementui table component merges rows or columns

Demo1 (merge rows or columns separately)

<!DOCTYPE html>
<html>

<head>
    < title > elementui merge rows or columns < / Title >
    <meta charset="utf-8">
    <script></script>
    <script></script>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <template>
            <div>
                <p>Merge column</p>
                <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%">
                    <el-table-column prop="id" label="ID" width="180"></el-table-column>
                    < El table column prop = "name" label = "name" > < / El table column >
                    < El table column prop = "amount1" sortable label = "numeric 1" > < / El table column >
                    < El table column prop = "amount2" sortable label = "numeric 2" > < / El table column >
                    < El table column prop = "amount3" sortable label = "numeric 3" > < / El table column >
                </el-table>
                <p>Merge row</p>
                <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
                    <el-table-column prop="id" label="ID" width="180"></el-table-column>
                    < El table column prop = "name" label = "name" > < / El table column >
                    < El table column prop = "amount1" label = "numeric value 1 (yuan)" > < / El table column >
                    < El table column prop = "amount2" label = "numeric value 2 (yuan)" > < / El table column >
                    < El table column prop = "amount3" label = "numeric value 3 (yuan)" > < / El table column >
                </el-table>
            </div>
        </template>
    </div>
    <script type="text/javascript">
    var Main = {
        data() {
            return {
                tableData: [
                    {
                        id: '12987122',
                        Name: 'Wang Xiaohu',
                        amount1: '234',
                        amount2: '3.2',
                        amount3: 10
                    }, {
                        id: '12987123',
                        Name: 'Wang Xiaohu',
                        amount1: '165',
                        amount2: '4.43',
                        amount3: 12
                    }, {
                        id: '12987124',
                        Name: 'Wang Xiaohu',
                        amount1: '324',
                        amount2: '1.9',
                        amount3: 9
                    }, {
                        id: '12987125',
                        Name: 'Wang Xiaohu',
                        amount1: '621',
                        amount2: '2.2',
                        amount3: 17
                    }, {
                        id: '12987126',
                        Name: 'Wang Xiaohu',
                        amount1: '539',
                        amount2: '4.1',
                        amount3: 15
                    }
                ]
            };
        },
        methods: {
            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                if (rowIndex % 2 === 0) {
                    if (columnIndex === 0) {
                        //Returns the combined number of rows and columns, and an array or object
                        //Return object
                        return {
                            rowspan: 1,
                            colspan: 3
                        }
                        //Return array
                        // return [1, 3];
                    //Omit the data of the second and third columns to prevent the original data of the merged columns from filling the table after the merged cells
                    } else if (columnIndex === 1 || columnIndex === 2) {
                        return [0, 0];
                    }
                }
            },

            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 0) {
                    if (rowIndex % 2 === 0) {
                        return {
                            rowspan: 2,
                            colspan: 1
                        };
                    } else {
                        return {
                            rowspan: 0,
                            colspan: 0
                        };
                    }
                }
            }
        }
    };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
    </script>
</body>

</html>

demo2

<!DOCTYPE html>
<html>

<head>
    < title > elementui merge rows or columns < / Title >
    <meta charset="utf-8">
    <script></script>
    <script></script>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <template>
            <div>
                <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%">
                    < El table column prop = "date" label = "date" width = "150" > < / El table column >
                    < El table column label = "delivery information" >
                        < El table column prop = "name" label = "name" width = "120" > < / El table column >
                        < El table column label = "address" >
                            < El table column prop = "province" label = "province" > < / El table column >
                            < El table column prop = "city" label = "city" > < / El table column >
                            < El table column prop = "address" label = "address" > < / El table column >
                            < El table column prop = "zip" label = "zip code" > < / El table column >
                        </el-table-column>
                    </el-table-column>
                </el-table>
            <div>
        </template>
    </div>
    <script type="text/javascript">
    var combineArr = [];
    var Main = {
        data() {
            return {
                tableData: [{
                    date: '2016-05-01',
                    Name: 'Wang Xiaohu',
                    Province: 'Shanghai',
                    City: 'Putuo District 0',
                    Address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
                    zip: 500
                }, {
                    date: '2016-05-02',
                    Name: 'Wang Xiaohu',
                    Province: 'Shanghai',
                    City: 'Putuo District 1',
                    Address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai',
                    zip: 300
                },{
                    date: '2016-05-02',
                    Name: 'Wang Xiaohu',
                    Province: 'Shanghai',
                    City: 'Putuo District 1',
                    Address: 'Lane 1520, Jinshajiang Road, Putuo District, Shanghai',
                    zip: 200
                }, {
                    date: '2016-05-02',
                    Name: 'Wang Xiaohu',
                    Province: 'Shanghai',
                    City: 'Putuo District 1',
                    Address: 'Lane 1521, Jinshajiang Road, Putuo District, Shanghai',
                    zip: 100
                }, {
                    date: '2016-05-03',
                    Name: 'Wang Xiaohu',
                    Province: 'Shanghai',
                    City: 'Putuo District 2',
                    Address: 'Lane 1522, Jinshajiang Road, Putuo District, Shanghai',
                    zip: 100
                }, {
                    date: '2016-05-04',
                    Name: 'Wang Xiaohu',
                    Province: 'Shanghai',
                    City: 'Putuo District 3',
                    Address: 'Lane 1523, Jinshajiang Road, Putuo District, Shanghai',
                    zip: 100
                }, {
                    date: '2016-05-04',
                    Name: 'Wang Xiaohu',
                    Province: 'Shanghai',
                    City: 'Putuo District 3',
                    Address: 'Lane 1524, Jinshajiang Road, Putuo District, Shanghai',
                    zip: 200
                }, {
                    date: '2016-05-05',
                    Name: 'Wang Xiaohu',
                    Province: 'Shanghai',
                    City: 'Putuo District 4',
                    Address: 'Lane 1525, Jinshajiang Road, Putuo District, Shanghai',
                    zip: 300
                }]
            };
        },
        methods: {
            flitterData(arr) {
                let spanOneArr = []
                let concatOne = 0
                arr.forEach(function(item,index) {
                    if (index === 0) {
                        spanOneArr.push(1);
                    } else {
                        If (item. Date = = = arr [index - 1]. Date) {// the first column needs to combine the judgment conditions of the same content
                            spanOneArr[concatOne] += 1;
                            spanOneArr.push(0);
                        } else {
                            spanOneArr.push(1);
                            concatOne = index;
                        };
                    }
                });
                return {
                    one: spanOneArr,
                }
            },
            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                if (rowIndex === 0) {
                    if (columnIndex === 0) {
                        return [1, 6];
                    }
                    if (columnIndex < 6) {
                        return [0, 0];
                    }
                } else {
                    if (columnIndex === 0 ) {
                        const _row = (this.flitterData(this.tableData).one)[rowIndex];
                        const _col = _row > 0 ? 1 : 0;
                        combineArr = [_row, _col];
                        return combineArr;
                    } else if (columnIndex === 3 || columnIndex === 5) {
                        return combineArr;
                    }
                }
            }
        }
    };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
    </script>
</body>

</html>