vue + element 相同数据合并行

215 阅读1分钟

image.png

<el-table
  :data="faceList"
  stripe
  border
  :span-method="objectSpanMethod"
  :header-cell-style="headerStyle"
  :row-style="tableRowClassName"
  style="width: 100%;margin-top: 10px;">
 </el-table>
// 合并行
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, rowIndex)
      const dataProvider = this.faceList
      if (columnIndex === 0) {
        // 上一条数据
        const prevRow = dataProvider[rowIndex - 1]
        // 下一条数据
        let nextRow = dataProvider[rowIndex + 1]
        if (prevRow && prevRow.cooperateNames === row.cooperateNames) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let rowspan = 1
          while (nextRow && nextRow.cooperateNames === row.cooperateNames) {
            rowspan++
            nextRow = dataProvider[rowspan + rowIndex]
          }
          if (rowspan > 1) {
            return { rowspan, colspan: 1 }
          }
        }
      }
      if (columnIndex === 1) {
        // 上一条数据
        const prevRow = dataProvider[rowIndex - 1]
        // 下一条数据
        let nextRow = dataProvider[rowIndex + 1]
        if (prevRow && prevRow.shipName === row.shipName) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let rowspan = 1
          while (nextRow && nextRow.shipName === row.shipName) {
            rowspan++
            nextRow = dataProvider[rowspan + rowIndex]
          }
          if (rowspan > 1) {
            return { rowspan, colspan: 1 }
          }
        }
      }
    },
 // 表头合并
    headerStyle ({row, column, rowIndex, columnIndex}) {
      console.log(column, rowIndex)
      row[2].colSpan = 2 //第三列的表头占据2个单元格
      row[3].colSpan = 0
      if (columnIndex === 3) {
        return 'display: none'
      }
    },