element中tabel表格中指定的子表列合并

最新推荐文章于 2022-07-26 11:16:02 发布

原创最新推荐文章于 2022-07-26 11:16:02 发布 · 576 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #经验分享

本文介绍如何在Vue项目中利用Element UI框架实现表格单元格的合并功能。通过具体代码示例，展示了如何设置span-method属性来根据业务需求合并特定行和列的单元格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表头合并就不说了，官方的文档都有啦！
表头合并地址：element-ui官方表格地址
先看下效果图拉

下面说说子表合并。
1.vue中代码【前提：vue中已引入element框架】
合并单元格属性 :span-method="arraySpanMethod"

<el-table   v-loading="listLoading" 
           :span-method="arraySpanMethod" 
           :data="listData" style="width: 100%"  border  height="650" 
            row-key="finance_code" >

 // 合并表格
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        // console.log(rowIndex)行
       // console.log(columnIndex)列
       //根据业务需求把需要合并的条件写出来，例如：当为第3行或者第5行的时候，合并第一列和第二列【如果要合并的的行或者列在前端不好取的话，可以让后台配合下**】
         if (rowIndex  ===  3 || rowIndex  ===  5) {
                if (columnIndex === 0) {
                      return [1, 2];
                 }else if (columnIndex === 1) {
                      return [0, 0];
                 }
           }
}