Select选择 然后改变Form表单规则

390 阅读1分钟

Select选择是,规则加载,选择否,取消规则

<template>
  <div>
    活动名称是否必填:<el-select v-model="value" placeholder="请选择" @change="change">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "是"
        },
        {
          value: "选项2",
          label: "否"
        }
      ],
      value: "",
      ruleForm: {
        name: ""
      },
      rules: {
        name: []
      }
    };
  },
  methods: {
    change() {
      this.$refs["ruleForm"].resetFields();
      if (this.value == "选项1") {
        this.$set(this.rules, "name", {
          required: true,
          message: "请输入活动名称",
          trigger: "blur"
        });
      } else {
        this.$set(this.rules, "name", {});
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>