关于element-ui:ElementUI表格组件合并行或列

37次阅读

共计 5072 个字符，预计需要花费 13 分钟才能阅读完成。

介绍

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>

正文完
element-ui
发表至： element-ui
2020-11-12
 0
关于element-ui:配置化elform的二次封装之思路分析附上代码可直接使用
关于element-ui:Element-Plus-源码分析构建与代码风格
关于element-ui:ElementUI使用篇eltab的使用样式修改集锦
关于element-ui:vueelement-实现tagsView功能