vue+ElementUI动态表单（校验规则、计算条件和约束条件

含有校验规则、计算条件和约束条件

主要是记录，以备不时之需。
使用vue-cli3构建工程，除默认模块，依赖只安装了elementUI，将其加入到main.js中，然后直接把About.vue替换成以下代码，即可食用，好吃不腻。
其中校验规则可以单独整一个文件，给予不同key在此动态调用，记录中固定只为非空校验。
不啰嗦，上代码。

<template>
    <div class="about">
        {{computedRule}}
        <el-form ref="getData" :model="form" label-width="80px">
            <el-form-item v-for="(item,key) in form.getData" :key="key" :label="item.label" v-show="!item.hide"
                :prop="'getData.' + key +'.value'"  :rules="[{required: true, message: 'Can\'t be empty'}]">
                <el-input v-model="item.value" :disabled="!item.formula"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
    name: 'About',
    data () {
        return {
            computedRule: '计算规则：label1*label2-label3/label4=result1;空值按0计算',
            form: {
                getData: {},
            }
        }
    },
    created () {
        this.getDataFn();
    },
    mounted() {
        //动态添加监听--数据结构与计算规则需前后端统一制定再进行代码调整
        let _this = this;
        Object.keys(this.form.getData).forEach(_ => {
            //计算
            _this.form.getData[_].formula && 
            _this.form.getData[_].formula.indexOf('=') > -1 &&
            _this.$watch('form.getData.' + _, (n, o) => {
                let res = n.formula.split('=')[0].replace(/[0-9A-Za-z]{4}/img, key => Number(_this.form.getData[key].value));
                console.log('computed----'+res);
                _this.form.getData[n.formula.split('=')[1]].value = eval(res).toString().indexOf('Infinity') > -1 ? 'error' : eval(res);
            },{deep: true,immediate: true})
            //约束
            _this.form.getData[_].hideRule && 
            _this.form.getData[_].hideRule.replace(/[0-9A-Za-z]{4}/img, key => {
                _this.$watch('form.getData.' + key, (n, o) => {
                    let res = _this.form.getData[_].hideRule.replace(/[0-9A-Za-z]{4}/img, item => Number(_this.form.getData[item].value));
                    console.log('visible----'+res);
                    _this.form.getData[_].hide = !eval(res);
                },{deep: true,immediate: true})
            })
        })
    },
    methods: {
        getDataFn() {
            /*数据挡板--key1、key2等为表单字段唯一标识，通常格式固定，
            方法内需根据此格式制定正则(/[0-9A-Za-z]{4}/img)以便提取。*/
            this.form.getData = {
                key1:{
                    formula: 'key1*key2-key3/key4=key5',
                    value: 5,
                    label: 'label1',
                    hide: false,
                    hideRule: null
                },
                key2:{
                    formula: 'key1*key2-key3/key4=key5',
                    value: 400,
                    label: 'label2',
                    hide: false,
                    hideRule: null
                },
                key3:{
                    formula: 'key1*key2-key3/key4=key5',
                    value: 30,
                    label: 'label3',
                    hide: false,
                    hideRule: null
                },
                key4:{
                    formula: 'key1*key2-key3/key4=key5',
                    value: 2,
                    label: 'label4',
                    hide: false,
                    hideRule: null
                },
                key5:{
                    formula: null,
                    value: null,
                    label: 'result1',
                    hide: false,
                    hideRule: null
                },
                key6:{
                    formula: null,
                    value: 'isShow: result1 >= 200',
                    label: 'visible1',
                    hide: false,
                    hideRule: 'key5 >= 200'
                },
                key7:{
                    formula: null,
                    value: 'isShow: label3-label1 >= 20',
                    label: 'visible2',
                    hide: false,
                    hideRule: 'key3-key1 >= 20'
                },
                key8:{
                    formula: null,
                    value: 'isShow: label3-label1 < label2',
                    label: 'visible3',
                    hide: false,
                    hideRule: 'key3-key1 < key2'
                },
            };
        }
    }
}

</script>