element-ui中Table表格合并单元格

最新推荐文章于 2025-03-25 15:45:07 发布

吉米多维奇

最新推荐文章于 2025-03-25 15:45:07 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_41078029/article/details/87704225

版权

本文介绍了一种使用Vue.js实现的表格数据展示方法，通过自定义的数组合并算法，实现了相同ID的数据行自动合并，减少视觉冗余，提高数据展示效率。文章详细解释了如何在el-table组件中应用自定义的span方法，以及如何通过遍历数据数组来确定每一行的合并范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <el-table
      :data="tableData"
      border
      :span-method="arraySpanMethod"
      style="width: 100%"
    >
      <el-table-column prop="id" label="1级" width="150"></el-table-column>
      <el-table-column prop="num" label="2级" width="150"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'num',
  data () {
    return {
      tableData: [
        {
          'id': '1',
          'num': '111'
        },
        {
          'id': '1',
          'num': '111'
        },
        {
          'id': '1',
          'num': '111'
        },
        {
          'id': '2',
          'num': '211'
        },
        {
          'id': '2',
          'num': '211'
        },
        {
          'id': '2',
          'num': '211'
        },
        {
          'id': '3',
          'num': '311'
        },
        {
          'id': '3',
          'num': '311'
        }
      ],
      idArr: [],
      idPos: 0
    }
  },
  created () {
    this.merage()
  },
  methods: {
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const row1 = this.idArr[rowIndex]
        const col1 = row1 > 0 ? 1 : 0
        return {
          rowspan: row1,
          colspan: col1
        }
      }
    },
    merage () {
      this.idArr = []
      this.idPos = 0
      for (let i = 0; i < this.tableData.length; i++) {
        if (i === 0) {
          this.idArr.push(1)
          this.idPos = 0
        } else {
          if (this.tableData[i].id === this.tableData[i - 1].id) {
            this.idArr[this.idPos] += 1
            this.idArr.push(0)
          } else {
            this.idArr.push(1)
            this.idPos = i
          }
        }
      }
    }
  }
}
</script>
<style scoped>
</style>