elementui表格组件动态合并单元格

zx&it

已于 2022-05-27 14:55:38 修改

阅读量1.1k

点赞数 2

分类专栏： elementui 文章标签： vue.js elementui 前端

于 2021-08-24 09:47:46 首次发布

本文链接：https://blog.csdn.net/qq_40639028/article/details/119883007

版权

elementui 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

该博客介绍了如何在ElementUI的表格组件中实现动态合并单元格，通过span-method属性结合自定义方法getSpanArr来根据数据动态计算合并规则。示例代码展示了根据类型字段进行跨行合并的实现，适用于需要灵活合并表格的场景。

摘要由CSDN通过智能技术生成

直接按照elementui表格组件给的合并单元格的方式，是写死的，不能满足动态合并的需求。一般都是自己总结合并规律，最后通过span-method方法返回的行列进行合并。

重点：:span-method

上代码：

<el-table :data="tableData" border :span-method="cellMar" stripe>
    <el-table-column prop="type" label="类型" width="200">
    </el-table-column>
    <el-table-column prop="class" label="课" width="200">
    </el-table-column>
    <el-table-column label="跳转">
        <template scope="scope">
            <el-tag :key="i" v-for="(item,i) in scope.row.urlList" :disable-transitions="false">
                <a :href="url">{{item.urlName}}</a>
            </el-tag>
        </template>
    </el-table-column>
</el-table>

//表格合并单元格跨行，实现首列根据不同类型进行跨行
getSpanArr(data) {
    this.spanArr = []
    for (var i = 0; i < data.length; i++) {
        if (i === 0) {
            this.spanArr.push(1);
            this.podds = 0
        } else {
            /*判断当前元素与上一个元素type值是否相同
             *相同就+1，代表需要合并的行+1
             */
            if (data[i].type === data[i - 1].type) {
                this.spanArr[this.podds] += 1;
                this.spanArr.push(0);
            } else {
                this.spanArr.push(1);
                this.podds = i;
            }
        }
    }
},
//得到行、列的合并值
cellMar({row, column, rowIndex, columnIndex}) {
    if (columnIndex === 0) {
        const _rows = this.spanArr[rowIndex];
        const _cols = _rows > 0 ? 1 : 0;
        return {
            rowspan: _rows,  //跨的行合并数
            colspan: _cols   //跨的列合并数
        }
    }
},

最后，在得到表格数据时，调用getSpanArr()方法，函数参数就是表格数据的数组。如：getSpanArr(tableData)；

tableData: [
    {type:'语文',class:'唐诗五百首',urlList:[]},
    {type:'语文',class:'宋词三百首',urlList:[]},
    {type:'数学',class:'九九乘法表',urlList:[]},
    {type:'数学',class:'微积分',urlList:[]},
    {type:'数学',class:'行列式',urlList:[]}
],