编程知识 cdmana.com

ElementUI表格组件合并行或列

介绍

1. 官方文档

合并行或列的方法官方文档为:

参数 说明 类型 可选值 默认值
span-method 合并行或列的计算方法 Function({ row, column, rowIndex, columnIndex }) —— ——

通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,四个参数row、column、rowIndex、columnIndex分别为当前行、当前列、当前行索引和当前列索引。

2. 两种返回方式

数组:

[1, 2] // 合并1行,2列

对象:

{
    rowspan: 3, // 合并3行
    colspan: 1  // 合并1列
}

3. 表格渲染顺序

从第一行开始,rowIndex为0,列从左到右(columnIndex从0到最后一列);然后第二行,rowIndex为1,列从左到右……

4. 置空操作

合并单元格时,系统会取第一个单元格的值。Element在操作单元格时,也是取第一个单元格的值,但是不会将第二个单元格的值置空,这就会导致多出的值没有做处理,因此,我们需要手动处理,定位到被合并的行或者列,将其值置为空,即返回 [0, 0]

Demo分享

先展示一下效果

demo1

合并列

合并行

demo2

合并行和列

Demo1(分别合并行或列)

<!DOCTYPE html>
<html>

<head>
    <title>ElementUI合并行或列</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>合并列</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="姓名"></el-table-column>
                    <el-table-column prop="amount1" sortable label="数值 1"></el-table-column>
                    <el-table-column prop="amount2" sortable label="数值 2"></el-table-column>
                    <el-table-column prop="amount3" sortable label="数值 3"></el-table-column>
                </el-table>
                <p>合并行</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="姓名"></el-table-column>
                    <el-table-column prop="amount1" label="数值 1(元)"></el-table-column>
                    <el-table-column prop="amount2" label="数值 2(元)"></el-table-column>
                    <el-table-column prop="amount3" label="数值 3(元)"></el-table-column>
                </el-table>
            </div>
        </template>
    </div>
    <script type="text/javascript">
    var Main = {
        data() {
            return {
                tableData: [
                    {
                        id: '12987122',
                        name: '王小虎',
                        amount1: '234',
                        amount2: '3.2',
                        amount3: 10
                    }, {
                        id: '12987123',
                        name: '王小虎',
                        amount1: '165',
                        amount2: '4.43',
                        amount3: 12
                    }, {
                        id: '12987124',
                        name: '王小虎',
                        amount1: '324',
                        amount2: '1.9',
                        amount3: 9
                    }, {
                        id: '12987125',
                        name: '王小虎',
                        amount1: '621',
                        amount2: '2.2',
                        amount3: 17
                    }, {
                        id: '12987126',
                        name: '王小虎',
                        amount1: '539',
                        amount2: '4.1',
                        amount3: 15
                    }
                ]
            };
        },
        methods: {
            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                if (rowIndex % 2 === 0) {
                    if (columnIndex === 0) {
                        // 返回行和列的合并数量,返回一个数组或对象
                        // 返回对象
                        return {
                            rowspan: 1,
                            colspan: 3
                        }
                        // 返回数组
                        // return [1, 3];
                    // 省略第二和第三列数据,防止合并列的原始数据填充到合并单元格后的表格里
                    } 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合并行或列</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="日期" width="150"></el-table-column>
                    <el-table-column label="配送信息">
                        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
                        <el-table-column label="地址">
                            <el-table-column prop="province" label="省份"></el-table-column>
                            <el-table-column prop="city" label="市区"></el-table-column>
                            <el-table-column prop="address" label="地址"></el-table-column>
                            <el-table-column prop="zip" label="邮编"></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: '王小虎',
                    province: '上海',
                    city: '普陀区0',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 500
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区1',
                    address: '上海市普陀区金沙江路 1519 弄',
                    zip: 300
                },{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区1',
                    address: '上海市普陀区金沙江路 1520 弄',
                    zip: 200
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区1',
                    address: '上海市普陀区金沙江路 1521 弄',
                    zip: 100
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区2',
                    address: '上海市普陀区金沙江路 1522 弄',
                    zip: 100
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区3',
                    address: '上海市普陀区金沙江路 1523 弄',
                    zip: 100
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区3',
                    address: '上海市普陀区金沙江路 1524 弄',
                    zip: 200
                }, {
                    date: '2016-05-05',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区4',
                    address: '上海市普陀区金沙江路 1525 弄',
                    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) { //第一列需合并相同内容的判断条件
                            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]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000038152474

Scroll to Top