el-table合并行 根据id合并行,span-method的使用

文章类型:Vue

发布者:hp

发布时间:2024-11-08

一:原因

有些时候,在查看表格的时候,相同的行需要进行合并,才能更好直观的看到数据情况

二:方式

采用element-ui表格组件的方法,:span-method主要是进行行或者列的合并

:span-method="objectSpanMethod"

三:代码

const objectSpanMethod = ({ row, column, rowIndex, columnIndex })=> {
//根据列的index 制定index为...的列合并

  if (columnIndex === 0) { // 指定合并第二列
    if (rowIndex !== 0 && tableData.value[rowIndex - 1].ordreNo === tableData.value[rowIndex].ordreNo) { // 第二列中的数据字段DYFX 只要重复 就合并行 qiBaseList 是表格数据数组
      return { rowspan: 0, colspan: 1 }
    } else {
      let count = 1
      for (var i = rowIndex + 1; i < tableData.value.length; i++) {
        if (tableData.value[i].ordreNo === tableData.value[rowIndex].ordreNo) {
          count++
        } else {
          break
        }
      }
      return { rowspan: count, colspan: 1 }
    }
  }
  }

四:效果