elementUI Table的行合并通用方法

前端鲁班

于 2021-10-28 11:37:26 发布

阅读量868

点赞数 2

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/weixin_39547000/article/details/121011112

版权

本文介绍了在ElementUI中实现Table行合并的通用方法，包括使用`span-method`属性和`mergeTableRow`函数。当遇到相同数据不相邻的情况，提供了一种改良方案，确保合并不受非相邻数据影响。请注意，为避免显示错乱，需要确保后端返回的相同数据集中在一起。

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

在这里插入图片描述
首先是内部使用el-table的方法:span-method=‘objectSpanMethod’

data() {
   
  return {
   
    table: [{
   
      id: '1',
      checkRoom: 'CTROOM',
      checkProject: '颈椎MRICT',
      checkMoney: '300.22',
      attention: '检查前空腹',
      appointmentTime: ''
    },{
   
      id: '1',
      checkRoom: 'CTROOM',
      checkProject: '颈椎MRICT1',
      checkMoney: '303.22',
      attention: '检查前空腹',
      appointmentTime: ''
    },{
   
      id: '1',
      checkRoom: 'CTROOM',
      checkProject: '颈椎MRICT22',
      checkMoney: '340.22',
      attention: '检查前空腹',
      appointmentTime: '2019-5-29 10：30'
    },{
   
      id: '1',
      checkRoom: 'DR',
      checkProject: '鼻骨',
      checkMoney: '500.22',
      attention: '检查前空腹',
      appointmentTime: '2019-5-29 9：30'
    }]
  };