elementUI的表格单元格合并

在Vue项目中使用elementui的el-table列表，从后台请求的列表动态数据其中有版本和任务两个字段（列）都会有重复，需要合并行单元格

查看elementui文档，可以给 el-table 传入一个 span-method 方法，接收一个参数{ row, column, rowIndex, columnIndex }，四个属性分别为当前行数据，当前列数据，当前行号，当前列号。方法返回一个数组 [rowspan, colspan] 或者 对象 { rowspan: 0, colspan: 2 }，表示合并的行和列

上代码

el-table 中的代码

<el-table
	v-loading="loading"
    :data="tableData"
    :span-method="arraySpanMethod"
    v-auto-height:maxHeight="-10"
    :max-height="maxHeight"
    border
>
    <el-table-column
        prop="versionName"
        label="版本"
        align="center"
     />
     <el-table-column
        prop="taskName"
        label="任务名称"
        align="center"
      />
      <el-table-column
        prop="cycle"
        label="轮次"
        align="center"
      />
      <el-table-column
        prop="caseTotal"
        label="Case 总数"
        align="center"
      />
      <el-table-column
        prop="successNum"
        label="成功数"
        align="center"
      />
      <el-table-column
        prop="failNum"
        label="失败数"
        align="center"
      />
</el-table>

js 代码

<script>
export default {
  name: 'TestReport',
  data() {
    return {
      loading: true,
      tableData: [],
      // 用于存储列表中需要合并的单元格和合并数
      versionSpanArr: [],
      taskSpanArr: [],
    }
  },
  created() {
    this.getTestReport()
  },
  methods: {
    // 获取表格数据
    async getTestReport() {
      this.loading = true
      try {
        const { data } = await getReport()
        this.tableData = data.casesResult
        // 从后台获取到列表数据之后，执行getSpanNum，要在DOM渲染之前即arraySpanMethod调用之前完成调用
        this.getSpanNum('versionName', 'versionSpanArr')
        this.getSpanNum('taskName', 'taskSpanArr')
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    // 重点：首先获取需要合并的单元格以及合并行数
    getSpanNum(spanName, spanArrName) {
      // 由于我有两列都需要合并，spanName, spanArrName 两个参数只是为了方便复用
      // spanName是需要合并的列的字段键名，spanArrName是接收需要合并的列的数据，初始化在data中
      this[spanArrName] = []
      let contantDot = 0
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          // 第一列
          this[spanArrName].push(1)
        } else {
          // 判断与上一行的值是否一样
          if (item[spanName] === this.tableData[index - 1][spanName]) {
            this[spanArrName][contantDot] += 1
            this[spanArrName].push(0)
          } else {
            // contantDot记录当前需要合并的行
            contantDot = index
            this[spanArrName].push(1)
          }
        }
      })
    },
    // 表格单元格合并绑定的函数
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 第一列，版本，与上一行值相同的this.versionSpanArr[rowIndex]都为0
        if (this.versionSpanArr[rowIndex]) {
          return {
            // rowspan 合并的行数
            rowspan: this.versionSpanArr[rowIndex],
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      } else if (columnIndex === 1) {
        // 第二列，任务
        if (this.taskSpanArr[rowIndex]) {
          return {
            rowspan: this.taskSpanArr[rowIndex],
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
</script>

本文地址：https://blog.csdn.net/fz_leaves/article/details/111933859