vue+element table 多级复杂合并单元格

最新推荐文章于 2024-09-26 17:58:41 发布

@曾经@

最新推荐文章于 2024-09-26 17:58:41 发布

阅读量1.0k

点赞数

分类专栏： elementUI vue

本文链接：https://blog.csdn.net/weixin_41628411/article/details/119872187

版权

vue 同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

elementUI

15 篇文章 0 订阅

订阅专栏

这篇博客介绍了一个用于展示多场景下多模型数据的表格实现，通过处理数据实现行合并。内容包括数据结构、表格组件配置以及数据处理方法，如`arraySpanMethod`、`mergeAction`和`rowMergeHandle`，旨在优化多对多模型的展示，提高信息阅读效率。

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

多场景下多模型（层级还有多层可自行添加判断即可）多对多
在这里插入图片描述

dataList: [{
        first: '1',
        second: '1',
        model: '蛋黄酱',
        all: '123213'
      }, {
        first: '1',
        second: '1',
        model: '蛋黄酱2',
        all: '123213'
      }, {
        first: '2',
        second: '1',
        model: '蛋黄酱2',
        all: '123213'
      }]

<el-table :data="dataList" border :span-method="arraySpanMethod" style="width: 100%;" class='list_table'>
      <el-table-column prop="first" align="center" label="场景">
      </el-table-column>
      <el-table-column prop="second" header-align="center" align="center" label="模型名称">
      </el-table-column>
      <el-table-column prop='model' header-align="center" align="center" label="负责人">
      </el-table-column>
      <el-table-column prop="all" header-align="center" align="center" label="资费代码">
      </el-table-column>
      <el-table-column prop="all" header-align="center" align="center" label="资费别名">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="80" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openDetails(scope.row)">查看策略</el-button>
        </template>
      </el-table-column>
    </el-table>

activated () {
    this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.dataList) // 处理数据
  },

arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'first') return this.mergeAction('first', rowIndex, column)
      if (column.property === 'second') return this.mergeAction('second', rowIndex, column)
    },
    mergeAction (val, rowIndex, colData) {
      let _row = this.rowMergeArrs[val].rowArr[rowIndex]
      let _col = _row > 0 ? 1 : 0
      return [_row, _col]
    },
    rowMergeHandle (arr, data) {
      if (!Array.isArray(arr) && !arr.length) return false
      if (!Array.isArray(data) && !data.length) return false
      let needMerge = {}
      arr.forEach(i => {
        needMerge[i] = {
          rowArr: [],
          rowMergeNum: 0
        }

        if (i === 'first') {
          data.forEach((item, index) => {
            if (index === 0) {
              needMerge[i].rowArr.push(1)
              needMerge[i].rowMergeNum = 0
            } else {
              if (item[i] === data[index - 1][i]) {
                needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1
                needMerge[i].rowArr.push(0)
              } else {
                needMerge[i].rowArr.push(1)
                needMerge[i].rowMergeNum = index
              }
            }
          })
        } else {
          data.forEach((item, index) => {
            if (index === 0) {
              needMerge[i].rowArr.push(1)
              needMerge[i].rowMergeNum = 0
            } else {
              if (needMerge['first'].rowArr[index] >= 1) {
                needMerge[i].rowArr.push(1)
                needMerge[i].rowMergeNum = index
              } else {
                if (item[i] === data[index - 1][i]) {
                  if (needMerge['first'].rowArr[index] === 1) {
                    needMerge[i].rowArr.push(1)
                    needMerge[i].rowMergeNum = index
                  } else {
                    needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1
                    needMerge[i].rowArr.push(0)
                  }
                } else {
                  needMerge[i].rowArr.push(1)
                  needMerge[i].rowMergeNum = index
                }
              }
            }
          })
        }
      })
      this.needMerge = needMerge
      return needMerge
    },