vue2.0 结合 elementUI 实现 select 动态控制 input 禁用

情景：

有两个 select 或者一个 input 和一个 select ，当后一个表单或 select 填值或选值之后，前一个表单动态禁用掉；【点击此处看效果】

 

代码如下：

HTML

<div id="app">
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="审批人">
      <el-input v-bind:disabled="disabledInput" v-model="formInline.user" placeholder="审批人"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select v-model="formInline.region" @change="inputToDisabled" placeholder="活动区域">
       <el-option label="区域一" value="shanghai"></el-option>
       <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
　　<el-form-item>
     <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
</div>

 

JS：

var Main = {
     data() {
       return {
          disabledInput:false
        }
     },
     methods: {
       onSubmit() {
         console.log('submit!');
       },
       inputToDisabled(){
           this.disabledInput=true;
       }
     }
  }

 

更多实现方法可参考文件：https://www.cnblogs.com/yingzi1028/p/6843313.html