含表达式的动态表单

描述：

• 以数值为判断标准，要求值类型必须为数字，即1为true，0为false。
• 以指定的值为判断标准，用全等的方式判断显示隐藏。

1、HTML

<div class="box">
      <el-form>
        <template v-for="(item, index) in list">
            <el-form-item :key="index" :label="item.title" v-if="showJs(item.showJs)">
                <el-radio-group v-model="form[item.model]" v-if="item.type === 'radio'">
                    <el-radio v-for="(m, n) in item.option" :key="n" :label="m.value">{{ m.label }}</el-radio>
                </el-radio-group>

                <el-input v-model="form[item.model]" v-if="item.type === 'input'"></el-input>
            </el-form-item>
        </template>
    </el-form>
</div>

2、DATA

data(){
  return{
    list: [
     {
        title: '是否展示',
        model: 'isShow',
        type: 'radio',
        option: [
            { label: '是', value: 1 },
            { label: '否', value: 0 },
        ],
        showJs: ''
    },
    {
        title: '姓名',
        model: 'name',
        type: 'input',
        option: [],
        showJs: 'return form.isShow'
    },
    {
        title: '年龄',
        model: 'age',
        type: 'input',
        option: [],
        showJs: 'return !form.isShow'
    },
    {
        title: '分类显示',
        model: 'isSort',
        type: 'radio',
        option: [
            { label: '一', value: '一' },
            { label: '二', value: '二' },
            { label: '三', value: '三' },
        ],
        showJs: ''
    },
    {
        title: '一类',
        model: 'one',
        type: 'input',
        option: [],
        showJs: 'return form.isSort === "一"'
    },
    {
        title: '二类',
        model: 'two',
        type: 'input',
        option: [],
        showJs: 'return form.isSort === "二"'
    },
    {
        title: '三类',
        model: 'three',
        type: 'input',
        option: [],
        showJs: 'return form.isSort === "三"'
    },
],
form: {
    isShow: 1,
    name: '檀木',
    age: 10,
    isSort: '一',
    one: '111',
    two: '222',
    three: '333'
}
  }
}

3、MEYHODS

methods: {
  showJs(str) {
      let flag = true;
      if (str) {
          let fn = new Function('form', str);
          flag = fn(this.form);
      } else {
          flag = true;
      }
      return flag;
  }
}