码迷,mamicode.com
首页 > 其他好文 > 详细

vue联动效果

时间:2018-05-21 14:47:58      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:efault   lag   form   lap   bsp   方式   ted   全局   默认   

目标效果如下:

技术分享图片

技术分享图片

 

 dialog弹出框中增加两个item

          <el-form-item label="维护方式" prop="oprType">
            <el-select class="filter-item" v-model="form.oprType" @change="switchOprType" placeholder="请选择维护方式">
              <el-option v-for="orTyp in  orTypeOptions" :key="orTyp.id" :label="orTyp.labelDefault" :value="orTyp.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="属性对象" prop="attrObj">
            <el-input v-model="form.attrObj" v-if="OprTypeFlag == ‘input‘" placeholder="请录入需要的属性对象"></el-input>
            <el-select class="filter-item" v-model="form.attrObj" v-if="OprTypeFlag == ‘select‘" placeholder="请录入需要的属性对象">
              <el-option v-for="attr in  dictOptions" :key="attr.code" :label="attr.name" :value="attr.code"> </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>

在data->return{}中定义一个全局变量

OprTypeFlag: ‘default‘,

  生成dialog时默认为文本框,created(){}方法中

this.OprTypeFlag = ‘input‘;

  在methods里面添加切换方法:

    switchOprType() {
      if (event.target.innerText === ‘下拉框‘) {
        this.OprTypeFlag = ‘select‘;
        this.form.attrObj = ‘‘
      } else {
        this.OprTypeFlag = ‘input‘;
        this.form.attrObj = ‘‘
      }
    }

  

vue联动效果

标签:efault   lag   form   lap   bsp   方式   ted   全局   默认   

原文地址:https://www.cnblogs.com/tabCtrlShift/p/9066640.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!