(vue)vue+iView实现编辑弹窗

(vue)vue+iView实现编辑弹窗带校验

效果：

    <!-- 编辑弹窗 -->
    <Modal
      v-model="isedit"
      title="编辑"
      :z-index="10000"
      @on-ok="handleEdit"
      @on-cancel="isedit = false"
    >
      <Form
        ref="uploadForm" //重要
        :model="uploadForm" //重要
        :rules="ruleValidate" //重要
        :label-width="80"
      >
        <FormItem label="名称" prop="name">
          <Input v-model="uploadForm.name" readonly placeholder="" />
        </FormItem>
        <FormItem label="别名" prop="otherName">
          <Input v-model="uploadForm.otherName" placeholder="" />
        </FormItem>
        <FormItem label="英文名" prop="enName">
          <Input v-model="uploadForm.enName" placeholder="" />
        </FormItem>
        <FormItem label="出生地" prop="place">
          <Select v-model="uploadForm.place" placeholder="请选择 " disabled>
            <Option value="北京">北京</Option>
            <Option value="上海">上海</Option>
            <Option value="shenzhen">深圳</Option>
          </Select>
        </FormItem>
        <FormItem label="出生日期" prop="birthday">
          <Date-picker
            type="date"
            placeholder="选择日期"
            v-model="uploadForm.birthday"
            style="width: 100%"
          ></Date-picker>
        </FormItem>
        <!-- <FormItem label=" xx" prop=" ">
          <Select v-model="uploadForm.xx" style="width: 100%" disabled>
            <Option :value="0" key="0">文件夹</Option>
            <Option :value="1" key="1">文件</Option>
          </Select>
        </FormItem> -->
      </Form>
    </Modal>

data(){
	return {
		 //编辑
		 isedit: false,
		 uploadForm: {
		   name: " ",
		   otherName: " ",
		   enName: " ",
		   place: " ",
		   birthday: " ",
		 },
		 ruleValidate: {
		   name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
		   otherName: [
		     { required: true, message: "别名不能为空", trigger: "blur" },
		   ],
		   enName: [
		     { required: true, message: "英文名不能为空", trigger: "blur" },
		   ],
		   place: [{ required: true, message: "出生地不能为空", trigger: "blur" }],
		   birthday: [
		     { required: true, message: "出生日期不能为空", trigger: "blur" },
		   ],
		 },
	}
}

事件：

 //编辑
 editRow(row, index) {
   this.isedit = true;
   this.uploadForm = JSON.parse(JSON.stringify(row));
 },
 //确定
 handleEdit(uploadForm) {
   this.$refs.uploadForm.validate((valid) => { //重要
     if (valid) {
     	...
       this.$Message.success("提交成功!");
     } else {
       this.$Message.error("表单验证失败!");
     }
   });
 },