编程知识 cdmana.com

Elementui table component merges rows or columns

Introduce

1. Official documents

The official document for merging rows or columns is :

Parameters explain type Optional value The default value is
span-method How to combine rows or columns Function({ row, column, rowIndex, columnIndex }) —— ——

By giving table Pass in span-method Method to merge rows or columns , Method is an object , Four parameters row、column、rowIndex、columnIndex Current row respectively 、 Current column 、 Current row index and current column index .

2. Two ways to return

Array :

[1, 2] //  Merge 1 That's ok ,2 Column 

object :

{
    rowspan: 3, //  Merge 3 That's ok 
    colspan: 1  //  Merge 1 Column 
}

3. Table rendering order

Start with the first line ,rowIndex by 0, Columns from left to right (columnIndex from 0 To the last column ); And then the second line ,rowIndex by 1, Columns from left to right ……

4. Empty operation

When merging cells , The system will take the value of the first cell .Element When working with cells , It also takes the value of the first cell , But it doesn't leave the value of the second cell empty , This will result in extra values not being processed , therefore , We need to handle it manually , Navigate to the merged row or column , Leave the value blank , Return [0, 0] .

Demo Share

Let's show the effect first

demo1

 Merge Columns

 Merger line

demo2

 Merge rows and columns

Demo1( Merge rows or columns separately )

<!DOCTYPE html>
<html>

<head>
    <title>ElementUI Merge rows or columns </title>
    <meta charset="utf-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.14.0/lib/index.js"></script>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/element-ui@2.14.0/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <template>
            <div>
                <p> Merge Columns </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=" full name "></el-table-column>
                    <el-table-column prop="amount1" sortable label=" The number  1"></el-table-column>
                    <el-table-column prop="amount2" sortable label=" The number  2"></el-table-column>
                    <el-table-column prop="amount3" sortable label=" The number  3"></el-table-column>
                </el-table>
                <p> Merger line </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=" full name "></el-table-column>
                    <el-table-column prop="amount1" label=" The number  1( element )"></el-table-column>
                    <el-table-column prop="amount2" label=" The number  2( element )"></el-table-column>
                    <el-table-column prop="amount3" label=" The number  3( element )"></el-table-column>
                </el-table>
            </div>
        </template>
    </div>
    <script type="text/javascript">
    var Main = {
        data() {
            return {
                tableData: [
                    {
                        id: '12987122',
                        name: ' X.h. ',
                        amount1: '234',
                        amount2: '3.2',
                        amount3: 10
                    }, {
                        id: '12987123',
                        name: ' X.h. ',
                        amount1: '165',
                        amount2: '4.43',
                        amount3: 12
                    }, {
                        id: '12987124',
                        name: ' X.h. ',
                        amount1: '324',
                        amount2: '1.9',
                        amount3: 9
                    }, {
                        id: '12987125',
                        name: ' X.h. ',
                        amount1: '621',
                        amount2: '2.2',
                        amount3: 17
                    }, {
                        id: '12987126',
                        name: ' X.h. ',
                        amount1: '539',
                        amount2: '4.1',
                        amount3: 15
                    }
                ]
            };
        },
        methods: {
            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                if (rowIndex % 2 === 0) {
                    if (columnIndex === 0) {
                        //  Returns the number of rows and columns merged , Returns an array or object 
                        //  Returns the object 
                        return {
                            rowspan: 1,
                            colspan: 3
                        }
                        //  Returns an array of 
                        // return [1, 3];
                    //  Omit the second and third columns of data , Prevent the original data of merged columns from filling into the table after merging 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 src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.14.0/lib/index.js"></script>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/element-ui@2.14.0/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=" full 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=" The 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: ' X.h. ',
                    province: ' Shanghai ',
                    city: ' Putuo District 0',
                    address: ' Jinshajiang road, putuo district, Shanghai  1518  get ',
                    zip: 500
                }, {
                    date: '2016-05-02',
                    name: ' X.h. ',
                    province: ' Shanghai ',
                    city: ' Putuo District 1',
                    address: ' Jinshajiang road, putuo district, Shanghai  1519  get ',
                    zip: 300
                },{
                    date: '2016-05-02',
                    name: ' X.h. ',
                    province: ' Shanghai ',
                    city: ' Putuo District 1',
                    address: ' Jinshajiang road, putuo district, Shanghai  1520  get ',
                    zip: 200
                }, {
                    date: '2016-05-02',
                    name: ' X.h. ',
                    province: ' Shanghai ',
                    city: ' Putuo District 1',
                    address: ' Jinshajiang road, putuo district, Shanghai  1521  get ',
                    zip: 100
                }, {
                    date: '2016-05-03',
                    name: ' X.h. ',
                    province: ' Shanghai ',
                    city: ' Putuo District 2',
                    address: ' Jinshajiang road, putuo district, Shanghai  1522  get ',
                    zip: 100
                }, {
                    date: '2016-05-04',
                    name: ' X.h. ',
                    province: ' Shanghai ',
                    city: ' Putuo District 3',
                    address: ' Jinshajiang road, putuo district, Shanghai  1523  get ',
                    zip: 100
                }, {
                    date: '2016-05-04',
                    name: ' X.h. ',
                    province: ' Shanghai ',
                    city: ' Putuo District 3',
                    address: ' Jinshajiang road, putuo district, Shanghai  1524  get ',
                    zip: 200
                }, {
                    date: '2016-05-05',
                    name: ' X.h. ',
                    province: ' Shanghai ',
                    city: ' Putuo District 4',
                    address: ' Jinshajiang road, putuo district, Shanghai  1525  get ',
                    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>

版权声明
本文为[Wonfody]所创,转载请带上原文链接,感谢

Scroll to Top