Vue+Element UI 下，如何给一个表单设置多个验证规则（：rules）

       依旧是公司里那个Vue+Element UI的项目。今天遇到了一个新的问题：表单中某个选择器的值不同，控制着下面表单内容是否显示。放图：

 

       大概就是这个样子。由后台返回的“发放方式”的数值，控制下面几个input框是否显示。这个实现比较简单，只需要把下面几个框用一个<dev>包裹起来，加上一个v-show=""的判断条件即可，但它们的表单验证让我为难了，因为只看Element UI官网给的方法来看，:rules="rules"只在data下面绑定了一个rules对象，可我这明显需要两套，即如果发放方式为"平台代发"时，只验证一个"发放方式"否则则全部验证。

       花了一点时间摸索，我想：如果不像官方给的那样，rules="rules"，然后在data下设置rules的值，而是把rules绑定一个函数，这个函数在computed计算属性中，根据不同的条件设置不同的验证方法不就可以了？自己尝试了一下，真的成功了，代码如下：

<el-form class="dialog-body" :rules="rulesList" :model="temp">
<!--这里为表单内容-->
</el-form>

<script>
export default {
  data() {
    return {
      rules: {
        pay_type: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        accno: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        accname: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        otp: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        otp_id: [
          { required: true, message: '不能为空', trigger: 'change' }
        ]
      },
      rules2: {
        pay_type: [
          { required: true, message: '不能为空', trigger: 'change' }
        ]
      },
    }
  },
computed: {
    rulesList: function() {
      if (this.temp.pay_type) {
        return this.rules
      } else {
        return this.rules2
      }
    }
  },

    这样就实现了对一个表单进行两套或以上的验证。