vue el-table的合并单元格与拆分单元格

vue el-table的合并单元格与拆分单元格

 methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const fields = ['stritemname', 'stritemstyle', 'strmadefactname', 'strpurchaseunit', 'dblquantity']
      if (fields.includes(column.property)) {
        const cellValue = row['lngitemid']
        if (cellValue && fields.includes(column.property)) {
          const prevRow = this.tableData[rowIndex - 1]
          let nextRow = this.tableData[rowIndex + 1]
          if (prevRow && prevRow['lngitemid'] === cellValue) {
            return { rowspan: 0, colspan: 0 }
          } else {
            // return { rowspan: row.rowspan, colspan: 1 }
            let countRowspan = 1
            while (nextRow && nextRow['lngitemid'] === cellValue) {
              nextRow = this.tableData[++countRowspan + rowIndex]
            }
            if (countRowspan > 1) {
              return { rowspan: countRowspan, colspan: 1 }
            }
          }
        }
      }
    },
}

---

   <!-- 拆分表格 -->
     <el-table
        :data="tableData"
        :border="true"
        row-key="id"
        :key="tableKey"
      >
        <el-table-column
          fixed="left"
          type="index"
          :label="$t('public_label.index')"
          width="70"
        >
        </el-table-column>

        <el-table-column
          v-for="(item, index) in checkeds"
          :key="`col_${index}`"
          :prop="tableOptions[index].value"
          :label="tableOptions[index].label"
          :width="tableOptions[index].value == 'backupFileName'?'490px':''"
        >
          <template slot-scope="scope">
            <span v-if="tableOptions[index].value == 'useStatus'">
              {{ scope.row.useStatus.toString().split("\n")[0] == 101 ? $t("mes_public_label.Successed") : $t("mes_public_label.Failed")}}
               <el-divider direction="horizontal"></el-divider>
              {{
              scope.row.useStatus.toString().split("\n")[1] == '101'
              ? $t("mes_public_label.Successed") :
              scope.row.useStatus.toString().split("\n")[1] == null ? '-' : $t("mes_public_label.Failed")}}
            </span>

            <span v-else-if="tableOptions[index].value == 'backupType'">
              {{ scope.row.backType == 0 ? "差异备份" : "完全备份" }}
            </span>

            <span v-else-if="tableOptions[index].value == 'backupFileName'" width="1222px">
              {{ scope.row.backupFileName.toString().split("\n")[0]}}
               <el-divider direction="horizontal"></el-divider>
              {{ scope.row.backupFileName.toString().split("\n")[1] == null ? '-' : scope.row.backupFileName.toString().split("\n")[1] }}
            </span>
            <span v-else-if="tableOptions[index].value == 'fileNumber'">
              {{ scope.row.fileNumber.toString() == '' ? '-' :  scope.row.fileNumber.toString().split("\n")[0] }}
               <el-divider direction="horizontal"></el-divider>
              {{ scope.row.fileNumber.toString() == '' ? '-' :  scope.row.fileNumber.toString().split("\n")[0] }}
            </span>
            <span v-else-if="tableOptions[index].value == 'backupFileNumber'">
              {{ scope.row.backupFileNumber.toString() == '' ? '-' :  scope.row.backupFileNumber.toString().split("\n")[0] }}
               <el-divider direction="horizontal"></el-divider>
              {{ scope.row.backupFileNumber.toString() == '' ? '-' :  scope.row.backupFileNumber.toString().split("\n")[0] }}
            </span>
            <span v-else-if="tableOptions[index].value == 'backupFileCapacity'">
              {{ scope.row.backupFileCapacity.toString() == '' ? '-' :  scope.row.backupFileCapacity.toString().split("\n")[0] }}
               <el-divider direction="horizontal"></el-divider>
              {{ scope.row.backupFileCapacity.toString() == '' ? '-' :  scope.row.backupFileCapacity.toString().split("\n")[1] }}
            </span>
            <span v-else>{{ scope.row[tableOptions[index].value] }}</span>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          :label="$t('public_label.operation')"
          width="220px"
        >
          <template slot-scope="scope">
            <!-- 删除、还原 -->
            <el-dropdown
              trigger="click"
              style="margin-right: 22px"
              v-if="
                $_has('deptQuery') ||
                $_has('deptEdit') ||
                $_has('deptDelete') ||
                $_has('deptEnable') ||
                $_has('deptDisable')
              "
            >
              <el-button type="primary">
                <span>{{ $t("public_btn_name.feature") }}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item @click.native="toView(scope.row)" v-if="$_has('backupQuery')">{{$t('public_btn_name.view')}}</el-dropdown-item> -->
                <el-dropdown-item
                  @click.native="toDeleteBack(scope.row)"
                  v-if="$_has('backupDelete')"
                >
                  {{ $t("public_btn_name.delete") }}
                </el-dropdown-item>
                <el-dropdown-item
                  @click.native="toReback(scope.row)"
                  v-if="$_has('backupEnable')"
                >
                  {{ $t("mes_public_label.reback") }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>