Arco Design 可编辑表格验证

Arco Design框架 

vue3.2

在表单里嵌套了一个可编辑表格，在写表格可编辑项验证时，（可编辑项是同个类型多项，因此想要加一个至少选一项的验证），input方法在用js打印时第一次总是undefined的bug，还有内容填写后修改删除内容为空，数据不更新bug，这两个bug都是视图正常，js获取错误。至于具体什么原因导致的，我暂时也不知道。但我的解决方法是将响应式数据转化成普通数据，并赋予相对应的值。具体代码如下：

<template>
  <a-modal :visible="popup.visible" :footer="false" unmount-on-close @cancel="handleCancel">
    <template #title>新建</template>
    <a-form ref="formRef" :model="popup.tradeForm" :rules="popup.tradeFormRule" @submit="popup.createSubmit">
      <a-form-item field="catalog_id" label="种类" :validate-trigger="['change']">
        <a-select v-model="popup.tradeForm.catalog_id" placeholder="请选择种类">
          <a-option v-for="(item, i) in options.typeOpts" :key="i" :value="item.value">{{ item.lable }}</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="buyNum" :label-col-flex="24" :content-flex="false" :validate-trigger="['input']">
        <a-table :columns="popup.columns" :data="popup.data">
          <template #buyNum="{ record, rowIndex }">
            <a-input-number v-model="popup.data[rowIndex].buyNum" placeholder="请填写数量" @input="popup.handleInput($event, record, rowIndex)" />
          </template>
        </a-table>
      </a-form-item>
      <div class="text-center">
        <a-space>
          <a-button type="primary" html-type="submit">添加</a-button>
          <a-button @click="popup.resetFields">清空</a-button>
        </a-space>
      </div>
    </a-form>
  </a-modal>
</template>
<script setup>
  import { reactive, ref, nextTick } from 'vue';

  const options = reactive({
    typeOpts: [
      {
        lable: '焦1',
        value: '焦2',
      },
      {
        lable: '煤15500',
        value: '煤15500',
      },
      {
        lable: '煤25000k',
        value: '煤25000k',
      },
    ],
    priceOpts: [
      {
        lable: '1000-2000',
        value: '1000-2000',
      },
      {
        lable: '2000-3000',
        value: '2000-3000',
      },
      {
        lable: '3000-4000',
        value: '3000-4000',
      },
    ],
  });
  const formRef = ref(null);
  const popup = reactive({
    visible: true,
    tradeForm: {
      catalog_id: undefined,
      buyNum: [],
    },
    tradeFormRule: {
      catalog_id: [{ required: true, message: '请输入数量（吨）' }],
      buyNum: {
        validator: (value, cb) => {
          return new Promise((resolve) => {
            if (popup.tradeForm.buyNum.length == 0) {
              cb('请至少填写一项购买数量');
            }
            resolve();
          });
        },
      },
    },
    columns: [
      {
        title: '价格范围(元/吨)',
        dataIndex: 'priceSelect',
      },
      {
        title: '购买数量',
        dataIndex: 'buyNum',
        slotName: 'buyNum',
      },
    ],
    data: [
      {
        priceSelect: '500-550',
        buyNum: undefined,
      },
      {
        priceSelect: '550-600',
        buyNum: undefined,
      },
      {
        priceSelect: '600-650',
        buyNum: undefined,
      },
      {
        priceSelect: '650-700',
        buyNum: undefined,
      },
      {
        priceSelect: '700-750',
        buyNum: undefined,
      },
    ],
    createSubmit: ({ values, errors }) => {
      if (!errors) {
        console.log(values);
      }
    },
    resetFields() {
      popup.data = popup.data.map((item) => {
        item.buyNum = undefined;
        return item;
      });
      formRef.value.resetFields();
    },
    handleInput(val, item, index) {
      item.buyNum = val;
      const array = [...popup.data];
      popup.changeData(array, index, val);
    },
    changeData(array, index, val) {
      nextTick(() => {
        let newArr = [];
        for (let i = 0; i < array.length; i++) {
          let obj = { ...array[i] };
          obj.buyNum = i === index ? val : undefined;
          newArr.push(obj);
        }
        /*
         *  下面语句虽然很长，但就是给表单里嵌套的表格的input字段的赋值
         *  给其赋值的目的一是为了实现表单验证，二是为了提交表单
         *  newArr.some((item) => item && +item.buyNum > 0)判断是否有输入
         *  后面两句分别是赋予输入值和[]
         */
        popup.tradeForm.buyNum = newArr.some((item) => item && +item.buyNum > 0)
          ? newArr.map((item) => ({
              [item.priceSelect]: item.buyNum,
            }))
          : [];
      });
    },
  });
  const handleCancel = () => {
    popup.visible = false;
    popup.resetFields();
  };
</script>