element table 列合并方法（重复的列数据合并）

最新推荐文章于 2024-07-19 14:21:45 发布

前前前端端端

最新推荐文章于 2024-07-19 14:21:45 发布

阅读量1.5k

点赞数 1

分类专栏：日常笔记文章标签：前端

本文链接：https://blog.csdn.net/weixin_46733392/article/details/121650702

版权

本文详细介绍了如何在Element UI的表格组件中实现列数据重复时的列合并，适用于前端开发人员优化数据展示的需求。

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

:span-method="objectSpanMethod"   此方法起作用

 <el-table class="elTable" :data="caseTableData" border :span-method="objectSpanMethod" show-summary >
      <el-table-column prop="className" label="当事人类型" align="center"> </el-table-column>
    </el-table>
  data () {
    return {
      spanArr: [],
      caseTableData: [ ], //八大类 表1
    }
  },

   // 列合并1
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      //columnIndex 合并第几列就写第几列
      if (columnIndex === 1) {  //此处为第二列数据
        const rowNum = this.spanArr[rowIndex]
        const colNum = rowNum > 0 ? 1 : 0
        return {
          rowspan: rowNum,
          colspan: colNum
        }
      }
    },

此方法是不够的 下面专门写一个函数在赋给表格值的时候 执行;

 getSpanNum (curName) {   
  //把数据赋值  但是这后台给你数据的时候 不一定是你相同的数据都是在一行里面放到（要保证相同的数据列在一起 ）我下面会 写个排序把他们列在一起
      cons