iview form组件中可编辑表格校验

FormItem里再嵌套FormItem，rules写行内。

<template>
  <Layout class="rightContent">
    <Content>
      <div class="my-page">
        <Form ref="form" :model="formData" :rules="rules" :label-width="80">
          <FormItem label="申请人">
            <span>{{ this.userInfo.name }}</span>
          </FormItem>
          <FormItem label="申购单位">
            <span>{{ this.userInfo.orgName }}</span>
          </FormItem>
          <FormItem label="联系电话" prop="tel">
            <Input v-model.number="formData.tel" placeholder="请输入联系电话" />
          </FormItem>
          <FormItem label="邮箱" prop="email">
            <Input v-model="formData.email" placeholder="请输入邮箱" />
          </FormItem>
          <FormItem label="用途" prop="purpose">
            <RadioGroup v-model="formData.purpose" @on-change="purposeChange">
              <Radio v-for="val in commonConst.purposeVal" :key="val" :label="val">
                {{ commonConst.purposeName[val] }}
              </Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="申购理由" prop="reason">
            <Input type="textarea" v-model="formData.reason" placeholder="请输入" />
          </FormItem>
          <FormItem label="试剂信息" prop="reagentsList">
            <Button type="success" @click="addItem">添加</Button>
            <!-- <Button type="success">导入</Button> -->
            <Table
              :columns="column"
              :data="formData.reagentsList"
              size="small"
              :disabled-hover="true"
              border
              style="margin-top:10px;max-width:900px;"
            >
              <template #chemicalId="{index}">
                <FormItem
                  :prop="'reagentsList.' + index + '.chemicalId'"
                  :rules="{ required: true, type: 'number', message: '1', trigger: 'change' }"
                >
                  <Select
                    v-model="formData.reagentsList[index].chemicalId"
                    :loading="searchLoading"
                    @on-query-change="onQueryChange($event, index)"
                    remote
                    filterable
                    transfer
                    placeholder="请输入试剂名称或cas号"
                  >
                    <Option
                      v-for="item in formData.reagentsList[index].chemicalList"
                      :value="item.id"
                      :key="item.id"
                      :label="item.name"
                    ></Option>
                  </Select>
                </FormItem>
              </template>
              <template #spec="{index}">
                <FormItem
                  :prop="'reagentsList.' + index + '.spec'"
                  :rules="{ required: true, type: 'number', message: '1', trigger: 'change' }"
                >
                  <i-input v-model.number="formData.reagentsList[index].spec" placeholder="请输入" style="top:0">
                    <Select v-model="formData.reagentsList[index].specUnit" slot="append" style="width: 70px" transfer>
                      <Option v-for="val in commonConst.specUnitVal" :value="val" :key="val">
                        {{ commonConst.specUnitName[val] }}
                      </Option>
                    </Select>
                  </i-input>
                </FormItem>
              </template>
              <template #purity="{index}">
                <FormItem
                  :prop="'reagentsList.' + index + '.purity'"
                  :rules="{ required: true, type: 'number', message: '1', trigger: 'change' }"
                >
                  <Select v-model="formData.reagentsList[index].purity" transfer placeholder="请选择">
                    <Option v-for="val in commonConst.purityVal" :value="val" :key="val">
                      {{ commonConst.purityName[val] }}
                    </Option>
                  </Select>
                </FormItem>
              </template>
              <template #number="{index}">
                <FormItem
                  :prop="'reagentsList.' + index + '.number'"
                  :rules="{ required: true, type: 'number', message: '1', trigger: 'change' }"
                >
                  <Input v-model.number="formData.reagentsList[index].number" placeholder="请输入" />
                </FormItem>
              </template>
              <template #labId="{index}">
                <FormItem
                  :prop="'reagentsList.' + index + '.labId'"
                  :rules="{ required: true, type: 'number', message: '1', trigger: 'change' }"
                >
                  <Select
                    v-model="formData.reagentsList[index].labId"
                    @on-open-change="labSelectOpen"
                    transfer
                    placeholder="请选择"
                  >
                    <Option v-for="item in labList" :value="item.id" :key="item.id">
                      {{ item.orgName }}
                    </Option>
                  </Select>
                </FormItem>
              </template>
              <template #action="{index}">
                <span class="btn-a" style="color:red;" @click="delItem(index)">删除</span>
              </template>
            </Table>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="saveData">保存</Button>
            <Button @click="$router.back()">取消</Button>
          </FormItem>
        </Form>
        <Spin fix v-if="loading"></Spin>
      </div>
    </Content>
  </Layout>
</template>

<script>
export default {
  name: 'apply-buy-edit',
  inject: ['systemRole'],
  data() {
    let column = [
      { title: '序号', width: 50, align: 'center', type: 'index' },
      { title: '试剂名称 | cas号', slot: 'chemicalId', minWidth: 150 },
      { title: '规格', slot: 'spec', minWidth: 130 },
      { title: '纯度', slot: 'purity', minWidth: 90 },
      { title: '数量', slot: 'number', minWidth: 90 },
      { title: '所属实验室', slot: 'labId', minWidth: 150 },
      { title: '操作', slot: 'action', width: 60, align: 'center' }
    ];
    return {
      rules: {
        tel: { type: 'number', required: true, message: '请输入联系电话' },
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }
        ],
        purpose: { type: 'number', required: true, message: '请选择用途' },
        reagentsList: { type: 'array', required: true, message: '请填写试剂信息' }
      },
      formData: {
        purpose: 2,
        reagentsList: [
          {
            chemicalId: '', //试剂id
            spec: '', //规格
            specUnit: 1, //规格单位，1g/瓶、2ml/瓶、3g/袋、4g/桶
            purity: '', //纯度，1分析纯、2化学纯、3优级纯、4色谱纯、99其他
            number: '', //数量
            labId: '', //所属实验室
            //  expiryDate:'', //有效期至
            chemicalList: []
          }
        ]
      },
      column,
      labList: [],
      searchLoading: false,
      timer: null,
      loading: false,
      userInfo: {}
    };
  },
  methods: {
    // 获取试剂信息
    getReagentList(data) {
      this.commonMethods.emitAjax({
        path: `/api/purchase_apply/${this.$route.params.id}/reagent_list`,
        success: res => {
          if (res && res.length) {
            this.labList = [{ id: data.labId, orgName: data.labName }];
            let arr = res.map(item => {
              return {
                chemicalId: item.chemicalId, //试剂id
                spec: item.spec, //规格
                specUnit: item.specUnit, //规格单位，1g/瓶、2ml/瓶、3g/袋、4g/桶
                purity: item.purity, //纯度，1分析纯、2化学纯、3优级纯、4色谱纯、99其他
                number: item.number, //数量
                labId: data.labId, //所属实验室
                chemicalList: [{ id: item.chemicalId, name: item.chemical.name }]
              };
            });
            this.$set(this.formData, 'reagentsList', arr);
          }
        },
        error: err => {
          !err.message && this.$Message.error('获取试剂信息失败');
        }
      });
    },
    setApplyToken() {
      this.$store.dispatch('getSubmitToken').then(applyToken => {
        this.$set(this.formData, 'applyToken', applyToken);
      });
    },
    addItem() {
      this.formData.reagentsList.push({
        chemicalId: '',
        spec: '',
        specUnit: 1,
        purity: '',
        number: '',
        labId: ''
      });
    },
    onQueryChange(searchKeyword, index) {
      if (this.timer) clearTimeout(this.timer);
      this.searchLoading = true;
      this.timer = setTimeout(() => {
        this.$store
          .dispatch('getChemicalList', { searchKeyword })
          .then(res => {
            this.$set(this.formData.reagentsList[index], 'chemicalList', res.content || []);
            this.searchLoading = false;
          })
          .catch(() => {
            this.searchLoading = false;
          });
      }, 800);
    },
    saveData() {
      this.$refs.form.validate().then(next => {
        if (!next) return;
        this.$store.commit('setLoading', true);
        let data = this.commonMethods.concatObject({}, this.formData);
        data.reagentsList.forEach(item => {
          delete item.chemicalList;
        });
        data.reagentsJson = JSON.stringify(data.reagentsList);
        delete data.reagentsList;
        delete data.id;
        // console.log(data);
        this.commonMethods.emitAjax({
          path: this.ajaxPath.submit,
          type: 'POST',
          data,
          success: () => {
            this.$store.commit('setLoading', false);
            this.$Message.success('提交成功');
            this.$router.back();
          },
          error: err => {
            this.setApplyToken();
            this.$store.commit('setLoading', false);
            !err.message && this.$Message.error('提交失败');
          }
        });
      });
    },
    delItem(index) {
      this.formData.reagentsList.splice(index, 1);
    }
  }
};
</script>