element-ui表格合并数据相同行

最新推荐文章于 2024-05-07 22:08:25 发布

geek_lz

最新推荐文章于 2024-05-07 22:08:25 发布

阅读量505

点赞数

文章标签： ui javascript 前端

本文链接：https://blog.csdn.net/weixin_48579769/article/details/127391428

版权

element-ui表格合并数据相同行这里写自定义目录标题

下面展示一些 内联代码片。


标签引用自定义合并方法

// An highlighted block
<el-table  :data="statisticsListP" :span-method="objectSpanMethod">

js


 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  		
      if(columnIndex == 0){
      //数据处理
      const dataProvider =  this.statisticsList.slice( (this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize);
      const cellValue = row[column.property];
      if (cellValue) {
        // 上一条数据
        const prevRow = dataProvider[rowIndex - 1]
        // 下一条数据
        let nextRow = dataProvider[rowIndex + 1]
        // 当上一条数据等于下一条数据
       
         if (prevRow && prevRow[column.property] === cellValue) {
           return { rowspan: 0, colspan: 0 }
         } else {
           let rowspan = 1
           while (nextRow && nextRow[column.property] === cellValue) {
             rowspan++
             nextRow = dataProvider[rowspan + rowIndex]
           }
           if (rowspan > 1) {
             return { rowspan, colspan: 1 }
           }
         }
      

      }
      }
    
      },