含表达式的动态表单


描述:

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

1、HTML

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;
  }
}