iview中form表单校验list

最新推荐文章于 2024-07-12 14:22:29 发布

路遇春风

最新推荐文章于 2024-07-12 14:22:29 发布

阅读量702

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_44046781/article/details/110003189

版权

vue 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

需求

在这里插入图片描述
点击添加增加一行但是在上一行ip地址为空的时候不能添加

代码

<template>
  <div>
    <Button type="primary" @click="addlist('formValidate')">添加</Button>
    <Form
      ref="formValidate"
      :model="formValidate"
      :rules="ruleValidate"
      :label-width="80"
      inline
    >
      <Row
        v-for="(item, index) in formValidate.ipList"
        :key="index"
        style="margin: 20px 0"
      >
        <FormItem
          label="IP地址"
          :prop="`ipList.${index}.companyIp`"
          :rules="ruleValidate.companyIp"
        >
          <Input v-model="item.companyIp" placeholder="Enter your name"></Input>  
        </FormItem>
        <FormItem label="备注">
          <Input v-model="item.remark" placeholder="Enter your e-mail"></Input>
        </FormItem>
        <FormItem>
          <Button @click="remove(index)">删除</Button>
        </FormItem>
      </Row>
      <FormItem>
        <Button type="primary" @click="handleSubmit('formValidate')"
          >Submit</Button
        >
        <Button @click="handleReset('formValidate')" style="margin-left: 8px"
          >Reset</Button
        >
      </FormItem>
    </Form>
  </div>
</template>
<script>
import whiteListApi from "@/api/whiteList.js";
export default {
  data() {
    return {
      formValidate: {
        companyIpStatus: 1,
        ipList: [{ companyIp: "", remark: "" }],
      },
      ips: { companyIp: "", remark: "" },
      ruleValidate: {
        companyIp: [
          { required: true, message: "IP地址不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getIp();
  },

  methods: {
    async getIp() {
      let ret = await whiteListApi.getIPs();
      this.formValidate.companyIpStatus = ret.companyIpStatus;
      this.formValidate.ipList = [...ret.ipList];
    },
    remove(index) {
      if (index != 0) {
        this.formValidate.ipList.splice(index, 1);
      }
    },
    addlist(name) {
      console.log(this.formValidate);
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.formValidate.ipList.push({ ...this.ips });
        } else {
          this.$Message.error("IP地址不能为空");
        }
      });
    },
    handleSubmit(name) {
      this.$refs[name].validate(async (valid) => {
        if (valid) {
          console.log(123);
          let ret = await whiteListApi.putIPs(this.formValidate);
          console.log(ret);
        }
      });
    },
  },
};
</script>