element-ui+vue2.0表格行合并

最新推荐文章于 2024-06-27 18:03:30 发布

Kaworu_2016

最新推荐文章于 2024-06-27 18:03:30 发布

阅读量1.1k

点赞数 1

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/sinat_39305013/article/details/123659656

版权

本文介绍了一种在Vue.js中利用Element UI的el-table组件进行多列数据行合并的方法。通过设置`span-method`属性，结合`mounted`钩子和自定义方法`getOrderNumber`，动态计算并存储需要合并的行索引，然后在`objectSpanMethod`方法中根据计算结果返回合并配置，实现了非列合并的行合并功能。

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

在网上搜了搜搜到了相关内容

参考地址点我

但是并不完全符合我的需求。所以进行了改造。上面链接的文章中仅是单列合并的写法。这里支持多个待合并列的指定。（非列合并，仅行合并）
效果图

首先是dom元素部分

<el-table :data="tableData" border :span-method="objectSpanMethod">
...
</el-table>

script部分
data中新增了三个数据

tableData代表表格数据
orderIndexArr存放的数据是{name:{1:[0,1,2,3]}}大概是这样的数据，其中name为列名（column的prop）1代表name列行内的数据，[0,1,2,3]代表哪些行的值是相同的
mergeKey为带合并的列的prop字符串数组

tableData: [{ name: '1', name1: '2', no: 'test' }, { name: '1', name1: '2', no: 'test' }, { name: '1', name1: '3', no: 'test' }, { name: '1', name1: '3', no: 'test' }, { name: '4', name1: '5', no: 'test' }],
orderIndexArr: {},
mergeKey: ['name', 'name1']

mounted中调用getOrderNumber（）方法

mounted () {
  this.getOrderNumber()
}

methods中新增了两个方法

getOrderNumber是准备待合并的列
objectSpanMethod 在表格渲染时返回要合并的数据

getOrderNumber () {
  const orderObj = {}
  this.tableData.forEach((item, index) => {
    item.rowIndex = index
    this.mergeKey.forEach(key => {
      if (orderObj[key] && orderObj[key][item[key]]) {
        orderObj[key][item[key]].push(index)
      } else {
        if (!orderObj[key]) {
          orderObj[key] = {}
        }
        orderObj[key][item[key]] = []
        orderObj[key][item[key]].push(index)
      }
    })
  })
  // 将数组长度大于1的值 存储到this.orderIndexArr（也就是需要合并的项）
  Object.keys(orderObj).forEach((key) => {
    if (orderObj[key]) {
      Object.keys(orderObj[key]).forEach(item => {
        if (!this.orderIndexArr[key]) {
          this.orderIndexArr[key] = []
        }
        this.orderIndexArr[key].push(orderObj[key][item])
      })
    }
  })
},
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
  if (this.mergeKey.includes(column.property)) {
    const key = column.property
    for (let i = 0; i < this.orderIndexArr[key].length; i += 1) {
      const element = this.orderIndexArr[key][i]
      for (let j = 0; j < element.length; j += 1) {
        const item = element[j]
        if (rowIndex === item) {
          if (j === 0) {
            console.log(rowIndex, key, {
              rowspan: element.length,
              colspan: 1
            })
            return {
              rowspan: element.length,
              colspan: 1
            }
          }
          if (j !== 0) {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      }
    }
  }
}