• 含表达式的动态表单


    描述:

    • 以数值为判断标准,要求值类型必须为数字,即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;
      }
    }
    
  • 相关阅读:
    还记得吗
    PAT A 1065. A+B and C (64bit) (20)
    畅通project(杭电1863)
    cocos2d-x 3.0游戏实例学习笔记《卡牌塔防》第七步---英雄要升级&amp;属性--解析csv配置文件
    热烈祝贺Polymer中文组织站点上线
    具体解释HTML中的window对象和document对象
    oc15--文档安装
    oc14--匿名对象
    oc13--pragma mark
    oc12--对象作为参数
  • 原文地址:https://www.cnblogs.com/min77/p/16353103.html
Copyright © 2020-2023  润新知