vue中使用elementUI表格动态行合并

晚风914

已于 2022-08-22 14:12:44 修改

阅读量500

点赞数 1

分类专栏： vue项目实用方法 vue项目经验 javascript 文章标签： elementui vue.js javascript

于 2022-08-22 14:11:32 首次发布

本文链接：https://blog.csdn.net/weixin_46112225/article/details/126464694

版权

vue项目经验同时被 3 个专栏收录

47 篇文章 1 订阅

订阅专栏

vue项目实用方法

41 篇文章 5 订阅

订阅专栏

javascript

21 篇文章 0 订阅

订阅专栏

需求背景：在开发中又是表格合并的行数并不是固定的行数，需要根据接口返回的数据来动态合并需要合并的行数

html代码：

<el-table
        :data="tableData"
        border
        :span-method="objectSpanMethod"
      >
        <el-table-column label="前面" align="center">
          <el-table-column prop="inquiryCode" label="id" align="center" />
          <el-table-column prop="phoneNumber" label="1" align="center" />
          <el-table-column prop="createTime" label="2" align="center" />
          <el-table-column prop="createTime" label="3" align="center" />
          <el-table-column prop="contractCount" label="4" align="center" />
        </el-table-column>
        <el-table-column label="中间" align="center">
          <el-table-column prop="bankName" label="6" align="center" />
          <el-table-column prop="acceptanceAmount" label="7" align="center" />
          <el-table-column prop="dueTime" label="8" align="center" />
          <el-table-column prop="dueDay" label="9" align="center" />
          <el-table-column prop="interestAmount" label="10" align="center" />
        </el-table-column>
        <el-table-column label="总计" align="center">
          <el-table-column prop="cashPayAmount" label="11" align="center" />
          <el-table-column prop="acceptanceAllAmount" label="12" align="center" />
          <el-table-column prop="payAllAmount" label="13" align="center" />
          <el-table-column prop="interestAllAmount" label="14" align="center" />
        </el-table-column>
      </el-table>

js代码：（注意：此处我是根据接口返回的inquiryCode是否相同来确实是否需要合并，你如果是其他字段自行更改）

export default {
  data() {
    return {
      tableData: [],
      spanArr: [],
     }
  },
  mounted() {
    this.rowspan();
  },
  methods: {
    rowspan() {
      // 每次调用清空数据
      this.spanArr = []
      this.position = 0
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1)
          this.position = 0
        } else {
          // inquiryCode 为需要合并查询的项
          if (this.tableData[index].inquiryCode === this.tableData[index - 1].inquiryCode) {
            this.spanArr[this.position] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.position = index
          }
        }
      })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 10 || columnIndex === 11 || columnIndex === 12 || columnIndex === 13) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
  }
}

效果截图：