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