vxe-table编辑校验表格

其中实现踢除数量和踢除原因的自定义输入，其中涉及的点有：

1. 表格校验必选
2. 动态校验-踢除数量
3. 单击触发编辑
4. 输入框关闭后自动保存
5. 保存失败后输入框中输入的值还原
6. 定位在最右侧

文末赋页面源码：

其中在vxe-table中实现自定义的编辑表格列时，

其中校验函数：

在动态校验中，validateDelQty的写法如图所示，在data中定义

const validateDelQty = ({ cellValue, rule, rules, row, rowIndex, column, columnIndex }) => {
      if (cellValue > row.csQty) {
        return new Error('剔除数量不能大于箱数')
      }
    };

在单元格关闭后，触发表格校验函数，如图所示，

其中$refs后面的mybusCargoDamageApplyTable在写vxe-table表格中定义的ref，必须要应用正确，

 async editClosedEvent(row, column) {
      try {
        this.editClosedData = column.row;
        // 调用表单的校验方法
        const validationPromise = this.$refs.mybusCargoDamageApplyTable.validate();

        const errMap = await validationPromise.catch((errMap) => {
          console.error('校验失败：', errMap);
          return errMap;
        });

        if (errMap === undefined) {
          // 校验通过的逻辑
          if ((this.editClosedData.delQty === null || this.editClosedData.delQty === '') && (this.editClosedData.submitRemark === null || this.editClosedData.submitRemark === '')) {
            throw new Error('剔除数量和剔除原因不能为空。');
          }
          // 校验通过且保存成功后的逻辑
          console.log('保存成功！');
          await this.saveData(this.editClosedData);
        }
      } catch (err) {
        // 对所有捕获的错误进行统一处理
        console.error('处理错误：', err);
      }
    },

在validate（）括号中，不填写true，默认只校验当前新修改后的值，若是括号中默认填写true，则校验表格中的所有要校验的数据。

注：其中默认不填写时，返回的errMap为undefined（可能条件，1：表单未输入进行校验；2：表单校验通过）

在单元格编辑状态下被关闭时，使用try...catch 函数，当errMap返回为undefined 并且剔除数量和剔除原因都不能为空得时候，进行保存操作，否则提示错误信息

在单元格数据被激活时，对原有数据进行备份：

editActivedEvent(row, column) {
  this.editActivedData = { ...column.row };
},

在保存失败时，还原表格数据：

this.tableData.forEach((item, index) => {
   if (item.id === this.editClosedData.id) {
      this.tableData.splice(index, 1, { ...this.editActivedData }); // 更新表格数据
});

源码：

<template>
  <div class="table-container">
    <zd-table
      show-overflow
      tableId="busCargoDamageApply_table"
      ref="mybusCargoDamageApplyTable"
      border
      page-show
      setting
      showExport
      height="100%"
      :loading="loading"
      :data="tableData"
      :columns="columns"
      @sort-change="sortChange"
      @select-all="selectTable"
      @selection-change="selectTable"
      highlight-current-row
      :default-sort="getSort"
      @handlePage="handlePage"
      @export="handleExport"
      :edit-config="{ trigger: 'click', mode: 'row', autoClear: false, showStatus: true }"
      @edit-closed="editClosedEvent"
      @edit-actived="editActivedEvent"
      :edit-rules="editRules"
    >
      <vxe-column
        slot="delQty"
        field="delQty"
        width="100"
        title="剔除数量"
        fixed="right"
        :edit-render="{}">
        <template #edit="{ row }">
          <el-input v-model="row.delQty"/>
        </template>
      </vxe-column>
      <vxe-column
        slot="submitRemark"
        field="submitRemark"
        width="100"
        title="剔除原因"
        fixed="right"
        :edit-render="{}"
      >
        <template #edit="{ row }">
          <el-input v-model="row.submitRemark" type="textarea"/>
        </template>
      </vxe-column>

    </zd-table>
  </div>
</template>

<script>
import BaseListMixins from '@/mixins/base-list-mixins';
import {
  apiBusCargoDamageAuditSearch,
  apiBusCargoDamageAuditExportExcel,
  apiBusCargoDamageBatchSubmit,
  apiBusCargoDamageBatchSave,
  apiBusCargoDamageSendEmail
} from '@api/est/busCargoDamageAudit.js';

export default {
  name: 'busCargoDamageAuditList',
  mixins: [BaseListMixins],
  data() {
    // eslint-disable-next-line no-unused-vars,consistent-return
    const validateDelQty = ({ cellValue, rule, rules, row, rowIndex, column, columnIndex }) => {
      if (cellValue > row.csQty) {
        return new Error('剔除数量不能大于箱数')
      }
    };
    return {
      editActivedData: {}, // 编辑激活数据,
      editRules: {
        delQty: [
          {
            required: true,
            trigger: 'change',
            type: 'number',
            validator: validateDelQty
          },
          {
            required: true,
            message: '请输入剔除数量',
            trigger: 'change'
          }
        ],
        submitRemark: [
          {
            required: true,
            message: '请输入剔除原因',
            trigger: 'change'
          }
        ]
      },
      columns: [...]
    }
  },
  watch: {
    handleSearchListValue(params) {
      this.searchBusCargoDamageApplyList(params)
    }
  },
  created() {
    // 注册全局事件,一定要销毁全局事件,避免未知Bug
    this.$bus.on('searchBusCargoDamageApplyList', this.searchBusCargoDamageApplyList);

    Object.assign(this.pageParam, {
      sort: '', // 默认排序列
      order: 'desc' // 默认排序方式
    });
  },
  beforeDestroy() {
    // 销毁全局事件
    this.$bus.off('searchBusCargoDamageApplyList', this.searchBusCargoDamageApplyList);
  },
  methods: {
    editActivedEvent(row, column) {
      this.editActivedData = { ...column.row };
    },
    async editClosedEvent(row, column) {
      try {
        this.editClosedData = column.row;
        // 调用表单的校验方法
        const validationPromise = this.$refs.mybusCargoDamageApplyTable.validate();

        const errMap = await validationPromise.catch((errMap) => {
          console.error('校验失败：', errMap);
          return errMap;
        });

        if (errMap === undefined) {
          // 校验通过的逻辑
          if ((this.editClosedData.delQty === null || this.editClosedData.delQty === '') && (this.editClosedData.submitRemark === null || this.editClosedData.submitRemark === '')) {
            throw new Error('剔除数量和剔除原因不能为空。');
          }
          // 校验通过且保存成功后的逻辑
          console.log('保存成功！');
          await this.saveData(this.editClosedData);
        }
      } catch (err) {
        // 对所有捕获的错误进行统一处理
        console.error('处理错误：', err);
      }
    },
    saveData(data) {
      const params = {
        approvalDate: data.approvalDate,
        approver: data.approver,
        damageType: data.damageType,
        delQty: data.delQty,
        id: data.id,
        orderNo: data.orderNo,
        rejectRemark: data.rejectRemark,
        sendEmailStatus: data.sendEmailStatus,
        skuCode: data.skuCode,
        status: data.status,
        submitDate: data.submitDate,
        submitRemark: data.submitRemark,
        submitter: data.submitter
      };
      apiBusCargoDamageBatchSave([params]).then(res => {
        const { success, message } = res;
        if (success) {
          this.$message({
            message,
            type: 'success'
          });
          // 刷新表格数据
          // this.searchBusCargoDamageApplyList(this.searchParams);
        } else {
          this.tableData.forEach((item, index) => {
            if (item.id === this.editClosedData.id) {
              this.tableData.splice(index, 1, { ...this.editActivedData }); // 更新表格数据
            }
          });
          this.$message({
            message,
            type: 'error'
          });
        }
      }).catch(() => {
        this.tableData.forEach((item, index) => {
          if (item.id === this.editClosedData.id) {
            this.tableData.splice(index, 1, { ...this.editActivedData }); // 更新表格数据
          }
        });
        this.$message({
          message: '保存失败',
          type: 'error'
        });
      })
    },
    searchBusCargoDamageApplyList(params) {
      this.loading = true;
      apiBusCargoDamageAuditSearch(this.getSearchParams(params)).then(result => {
        this.loading = false;
        this.setSearchResult('mybusCargoDamageApplyTable', result);
      }).catch(() => {
        this.loading = false;
      })
    },
    handleClick(row) {
      this.handleTableView('handlebusCargoDamageApplyViewForm', row)
    },
    handleBusCargoDamageApplySubmit() {
      const partial = this.selection.every(item => (item.status == 1 || item.status == 4) && item.id);
      if (!partial) {
        this.$message({
          message: '仅【未提交并且有剔除数量或审核驳回状态】才可提交申请',
          type: 'error'
        });
        return;
      }
      const ids = this.selection.map(item => item.id);
      this.$confirm('此操作将提交' + ids.length + '条记录, 提交后不可更改是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        apiBusCargoDamageBatchSubmit(ids.join(',')).then(result => {
          this.loading = false;
          if (result) {
            if (result.success) {
              // 刷新表格数据
              this.searchBusCargoDamageApplyList(this.searchParams);
              this.$message({
                message: result.message,
                type: 'success'
              });
            } else {
              this.$message({
                message: result.message,
                type: 'error'
              });
            }
          }
        }).catch(() => {
          this.loading = false;
        })
      }).catch(() => {})
    },
    handleBusCargoDamageApplySendEmail() {
      const partial = this.selection.every(item => (item.status == 4 || item.sendEmailStatus == 'F'));
      if (!partial) {
        this.$message({
          message: '仅【驳回状态或发送失败状态】才可提交发送邮件',
          type: 'error'
        });
        return;
      }
      const ids = this.selection.map(item => item.id);
      this.$confirm('此操作将发送' + ids.length + '条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        apiBusCargoDamageSendEmail(ids.join(',')).then(result => {
          this.loading = false;
          if (result) {
            if (result.success) {
              // 刷新表格数据
              this.searchBusCargoDamageApplyList(this.searchParams);
              this.$message({
                message: result.message,
                type: 'success'
              });
            } else {
              this.$message({
                message: result.message,
                type: 'error'
              });
            }
          }
        }).catch(() => {
          this.loading = false;
        })
      }).catch(() => {})
    },
    handleExport(data) {
      this.loading = true;
      const params = this.searchParams;
      Object.assign(params, { fileName: '货损导出', ...data });
      apiBusCargoDamageAuditExportExcel(params).then(() => {
        this.loading = false;
      });
    }
  }
}
</script>