ElementUi中el-table表格单元格合并

最新推荐文章于 2025-10-09 19:00:00 发布

原创最新推荐文章于 2025-10-09 19:00:00 发布 · 1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

这段代码展示了如何在Vue.js中创建一个表格，并通过计算属性`tableDataColumn`处理重复数据，以便在显示时合并相同的姓名行。`objectSpanMethod`方法用于处理表格单元格的合并，确保当姓名相同的情况下，只显示一行并合并列。这个例子对于理解如何在前端展示复杂数据和优化表格渲染很有帮助。

<template>
  <el-table :data="tableData" height="250" :span-method="objectSpanMethod" border style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    }
  },
  computed: {
    //用于查找相同数据的数量
    tableDataColumn() {
      let dataObject = {}
      this.tableData.forEach((item, index) => {
        if (dataObject[item.name]) {
          dataObject[item.name].push(item)
        } else {
          dataObject[item.name] = [item]
        }
      })
      return dataObject
    }
  },
  created() {
    let tableData = [
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-02',
        name: '王力',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-01',
        name: '王力',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-07',
        name: '王丹',
        address: '上海市普陀区金沙江路 1518 弄'
      }
    ]
    //模拟接口返回速度
    setTimeout(() => {
      this.tableData = this.selectionSort(tableData)
    }, 500)
  },
  methods: {
    //将名称相同的数据进行结合-重新排序-辅助表格合并
    selectionSort(arr) {
      //考虑到后台数据返回一般在created执行，computed优先级高于created，
      // tableDataColumn执行时this.tableData无法及时获取值-重新筛选一次
      const arrList = new Map()
      arr.forEach((item, index) => {
        if (arrList.has(item.name)) {
          let value = arrList.get(item.name)
          value.push(item)
          arrList.set(item.name, value)
        } else {
          arrList.set(item.name, [item])
        }
      })
      let newList = []
      for (let item of [...arrList]) {
        newList = newList.concat(item[1])
      }
      return newList
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex > 0 && row.name === this.tableData[rowIndex - 1].name) {
          return {
            rowspan: 0,
            colspan: 0
          }
        } else {
          const name = row.name
          //此处采用computed计算属性-存在缓存
          const rows = this.tableDataColumn[name]
          return {
            rowspan: rows.length,
            colspan: 1
          }
        }
      }
    }
  }
}
</script>