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

这段代码展示了如何在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>

结果展示

 

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值