欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

elementUI的表格单元格合并

程序员文章站 2022-06-08 15:55:04
...
在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>