Vue使用Element的表单Form必填项太多，导致代码冗余

Vue项目使用Element表单时，常会遇到表单很长，字段很多，必填项也多，曾经遇到过一张表单50多个字段，几乎全是必填项，本身ruleForm去定义就很长，再加上必填项rules的定义，光表单这点东西就100多行定义了，更别说页面中还有别的代码，整个页面看起来很不美观，也很冗余。

下面介绍一种方法，可以减少rules的长度，主要针对：
1、字段多表单长；2、只做必填项校验；3、几乎全是必填项

原理就是：利用for循环来循环定义的表单ruleForm
话不多说，直接上代码

  created() {
    this.setRequiredRules(this.ruleForm);
  },
  methods:{
      setRequiredRules(data) {
      let rule = {};
      for (var key in data) {
        rule[key] = [
          { required: true, message: "请填写必填项", trigger: "change" },
        ];
      }
      this.rules = rule;
    },
  }

如果某字段不需要为必填项，加一个if语句判断即可

举个例子：使用了for循环表单的定义ruleForm，
若ruleForm：{name:"",age:""}，
那么for (var key in data)里的key就是name和age，
我们在 setRequiredRules 方法中定义了一个rule = {}
而rule[key]生成的可以理解为我们常使用的rule.name

问：为什么不能用rule.key？
答：用rule.key出来的可真的就是
rule：{
key:[{ required: true, message: “请填写必填项”, trigger: “change” }]
}

因此用rule[key]才能够保证生成的是
rule：{
name:[{ required: true, message: “请填写必填项”, trigger: “change” }],
age:[{ required: true, message: “请填写必填项”, trigger: “change” }],
}

如果还是不能够理解，可以自己尝试在控制台打印出来看一看

以下是完整代码：

<template>
  <div class="form">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px">
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
              style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;">
            </el-time-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="即时配送" prop="delivery">
        <el-switch v-model="ruleForm.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="活动性质" prop="type">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
          <el-checkbox label="地推活动" name="type"></el-checkbox>
          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊资源" prop="resource">
        <el-radio-group v-model="ruleForm.resource">
          <el-radio label="线上品牌商赞助"></el-radio>
          <el-radio label="线下场地免费"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活动形式" prop="desc">
        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {},
    };
  },
  methods: {
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((v) => {
        if (v) {
        } else {
        }
      });
    },
    setRequiredRules(data) {
      let rule = {};
      for (var key in data) {
        if (key !== "desc") {
          rule[key] = [
            { required: true, message: "请填写必填项", trigger: "change" },
          ];
        }
      }
      this.rules = rule;
    },
  },
  created() {
    this.setRequiredRules(this.ruleForm);
  },
};
</script>
<style lang="less" scoped>
.form {
  width: 400px;
}
</style>