vue-easytable实现合并单元格(多列多个同值),element UI的el-table也适用!

效果:

我这用的虽然是vue-easytable,但是element UI的table这个方法是同样适用的,element合并单元格方法中有columnIndex,用

columnIndex判断是哪一列需要合并单元格,跟我的row.feild是一样的。

附上代码:

    / /传入需要处理的表格数据和列的key值 返回数组 每一行需要合并的单元格数

    // 例:[2,0] 合并第一行和第二行 [3,0,0,2,0] 合并一到三  四到五行

    flitterTableData (data, key) {

      let arr = []

      let concat = 0

      data.forEach((item, index) => { // 循环表格数据

        if (index === 0) {

          arr.push(1)

        } else {

          if (item[key] === data[index - 1][key]) { // 每一列需合并相同内容的字段

            arr[concat] += 1

            arr.push(0)

          } else {

            arr.push(1)

            concat = index

          }

        }

      })

      return {

        arr

      }

    },

    // 合并单元格

    bodyCellSpan ({ row, column, rowIndex }) {

      if (column.field === 'material_code') {

        // 得到material_code列中每一行需要合并的单元格数

        const _row = (this.flitterTableData(this.materialTableData, 'material_code')).arr[rowIndex]

        const _col = _row > 0 ? 1 : 0

        return {

          rowspan: _row,

          colspan: _col

        }

      }

      if (column.field === 'material_name') {

        // 得到material_name列中每一行需要合并的单元格数

        const _row = (this.flitterTableData(this.materialTableData, 'material_name')).arr[rowIndex]

        const _col = _row > 0 ? 1 : 0

        return {

          rowspan: _row,

          colspan: _col

        }

      }

    }

你可能感兴趣的:(vue-easytable实现合并单元格(多列多个同值),element UI的el-table也适用!)