vxe-table合并行方法可直接用

vxe-table合并行方法可直接用

  <vxe-table
          ref="xTable"
          :data="[]"
          :column-config="{ resizable: true }"
          :edit-config="{ trigger: 'click', mode: 'row' }"
          border
          show-overflow
          :span-method="rowspanMethod"
        >
          <vxe-column field="operationName" title="工序名称">
            <template #default="{ row }"> {{ row.operationName }} </template>
          </vxe-column>
   </vxe-table>
 
  const rowspanMethod = ({ row, column, rowIndex, columnIndex }) => {
    // 合并的字段 需要根据你的数据去配置
    const fields = ['operationName', 'inspectionUsers', 'inspectionProject']
    const cellValue = row[column.property]
    if (cellValue && fields.includes(column.property)) {
      const prevRow = checkPageList.value[rowIndex - 1]
      let nextRow = checkPageList.value[rowIndex + 1]
      if (prevRow && prevRow[column.property] === cellValue) {
        return { rowspan: 0, colspan: 0 }
      } else {
        let countRowspan = 1
        while (nextRow && nextRow[column.property] === cellValue) {
          nextRow = checkPageList.value[++countRowspan + rowIndex]
        }
        if (countRowspan > 1) {
          return { rowspan: countRowspan, colspan: 1 }
        }
      }
    }
  }