element ui table表格实现不同行数据某个字段相等,合并单元格方法

40 阅读1分钟
const plantMergeArr = ref([]);
const mergeSpanArrIndex = ref(0);

function setMergeArr(data) {
  mergeSpanArrIndex.value = 0
  plantMergeArr.value = []
  for (var i = 0; i < data.length; i++) {
    if (i === 0) {
      plantMergeArr.value.push(1)
      mergeSpanArrIndex.value = 0
    } else {
      // plantId 字段更改成你自己要判断的数据
      if (data[i].storehouseId && data[i].storehouseId === data[i - 1].storehouseId) {
        plantMergeArr.value[mergeSpanArrIndex.value] += 1
        plantMergeArr.value.push(0)
      } else {
        plantMergeArr.value.push(1)
        mergeSpanArrIndex.value = i
      }
    }
  }
}

function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  if (form.value.prodSells.length > 1) {
    if (columnIndex === 3||columnIndex === 4) {
      const _row = plantMergeArr.value[rowIndex]
      const _col = _row > 0 ? 1 : 0
      return {
        rowspan: _row,
        colspan: _col
      }
    }
  }
}
setMergeArr(list.value)
//list即为表格数据源
//最后表格头部添加合并方法
 <el-table border
                  :span-method="objectSpanMethod"
                  :data="form.prodSells"
        ></el-table>