1.调用setFieldsValue()方法,需要放在$nextTick()函数中执行,

2、给FORM赋值可以少传,但不可以多传

    // 编辑
    onEdit (val) {
      this.form.resetFields()
      this.visible = true
      this.$nextTick(() => {
        this.newUp = '编辑IPSEC'
        this.isDisabled = true
        const { agreement, encrypt, authentication, lifebytes, lifetime, name } = val
        if (val) {
          this.form.setFieldsValue({
            username: name,
            encrypt,
            authentication,
            lifebytes,
            lifetime
          })
          this.agreementVal = agreement
        }
      }, 300)
    },
<a-modal
      :title="newUp"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="onSave"
      @cancel="handleCancel"
      okText="确定"
      cancelText="取消"
      :maskClosable="false"
    >
      <a-form :form="form">
        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="名称">
          <a-input
            :disabled="isDisabled"
            v-decorator="['username', { rules: [{ required: true, message: '请输入名称' }] }]"
            placeholder="请输入名称"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="封装协议"
        >
          <a-checkbox-group :options="options" v-model="agreementVal" @change="onChange($event,options)" />
        </a-form-item>
        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="加密算法">
          <a-select
            @change="handleChangePwd"
            placeholder="请选择加密算法"
            v-decorator="['encrypt', { rules: [{ required: true, message: '请选择加密算法' }] }]"
          >
            <a-select-option v-for="item in algorithm" :key="item.id" :value="item.name"> {{ item.name }} </a-select-option>

          </a-select>
        </a-form-item>
        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="认证算法">
          <a-select
            @change="handleChangePwd1"
            placeholder="请选择认证算法"
            v-decorator="['authentication', { rules: [{ required: true, message: '请选择认证算法' }] }]"
          >
            <a-select-option v-for="item in authentication" :key="item.id" :value="item.name"> {{ item.name }} </a-select-option>

          </a-select>
        </a-form-item>
        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="生命周期(m)">
          <a-input-number
            style="width:100%"
            v-decorator="['lifetime',{rules: [{ required: true, message: '请输入周期1-60分钟' }, { validator: validateTime} ],validateTrigger: ['change', 'blur']}
            ]"
            :min="1"
            :max="60"
            :step="1"
            placeholder="请输入周期1-60分钟"
          />
        </a-form-item>
        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="流量(GB)">
          <a-input-number
            style="width:100%"
            :min="1"
            :max="4096"
            :step="1"
            v-decorator="['lifebytes',{rules: [{ required: true, message: '请输入流量,最大4096GB' }, { validator: validateFlow} ],validateTrigger: ['change', 'blur']}]"
            placeholder="请输入流量,最大4096GB"
          />
        </a-form-item>
      </a-form>
    </a-modal>

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐