Element-ui 表格合并行 elemen合并行 element-ui 合并行表格合并行

最新推荐文章于 2024-08-30 09:35:19 发布

头上一片天空

最新推荐文章于 2024-08-30 09:35:19 发布

阅读量482

点赞数

分类专栏： VUE 文章标签： ui javascript vue.js

本文链接：https://blog.csdn.net/qq_40739917/article/details/129277782

版权

VUE 专栏收录该内容

18 篇文章 3 订阅

订阅专栏

文章介绍了如何在使用Element-ui框架时，通过设置`span-method`属性和处理数据来实现表格行的合并。主要步骤包括：计算需要合并的行数，更新数据数组，以及定义合并方法。示例代码展示了如何根据日期和维修人进行行合并。

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

Element-ui 表格合并行 elemen合并行 element-ui 合并行表格合并行

合并方法

合并方法

思路：比如说现在要合并三行数据，第一行固定设置合并行数量为3，第二行，第三行固定0 ，这样就是合并了三行

 <el-table
              ref="table"
              v-loading="loading"
              element-loading-text="拼命加载中"
              :data="tableData"
              :highlight-current-row="true"
              max-height="800"
              size="mini"
              stripe
              border
              show-summary
              :span-method="objectSpanMethodDay"
            >
              <el-table-column align="center" label="维修日期" prop="maintenanceDate" width="100" sortable />

              <el-table-column align="center" label="维修人" prop="maintenanceName" width="100" />

              <el-table-column align="center" label="技能等级" prop="workerLevel" width="80" />

             
</el-table>

data() {
    // 这里存放数据
    return {
      loading: false,
      tableData: [],
      spanArr: [],
      pos: ''
    }
  },

    // 加载表格数据
    loadTableData() {
      this.loading = true
      request({
        url: '',
        method: 'GET'
      }).then((res) => {
      	// 计算数据要合并的行
        this.getSpanArr(res.data.list)
        this.tableData = res.data.list
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    
	// 计算要合并的行
    getSpanArr(data) {
      // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 判断当前元素(日期， 维修人)与上一个元素是否相同，只需要改这个条件就可以了
          if (data[i].maintenanceDate === data[i - 1].maintenanceDate && data[i].maintenanceName === data[i - 1].maintenanceName) {
            // 这个逻辑就是，比如说现在 要合并三行数据， 第一行固定设置 合并行数量 为3，第二行，第三行固定0 ，这样就是合并了三行
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
        console.log(this.spanArr)
      }
    },
    // 合并行 
    objectSpanMethodDay({ row, column, rowIndex, columnIndex }) {
      // 那一列需要合并，合并 第一列第二列 日期 + 维修人
      if (columnIndex === 1 || columnIndex === 2) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        console.log(`rowspan:${_row} colspan:${_col}`)
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        }
      }
    }