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

版权声明：1.版权归原作者Moment ° 回忆 ✨所有； 2.未经原作者允许不得转载本文内容，否则将视为侵权； 3.转载或者引用本文内容请注明来源及原作者； 4.对于不遵守此声明或者其他违法使用本文内容者，本人依法保留追究权等。 https://blog.csdn.net/qq_35366269/article/details/82866323

代码如下：

<template>
    <div>

        <div>===========vue2.0结合Element实现select动态控制input禁用===========</div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">

          <el-form-item label="活动区域">
            <el-select v-model="formInline.region" @change="inputToDisabled(formInline.region)" placeholder="活动区域">
              <el-option label="上海" value="1"></el-option>
              <el-option label="北京" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="审批人">
            <el-input v-bind:disabled="disabledInput" v-model="formInline.user" placeholder="审批人"></el-input>
          </el-form-item>

        </el-form>




    </div>
</template>

<script>
    export default {
        name: "Element_31",
      data(){
        return {

          formInline: {
            user: '',
            region: ''
          },
          disabledInput:false
        }
      },

      created(){


      },
      methods:{

        inputToDisabled(region){
          console.log("region:"+region);
          //region:1
          //如果选择的是1那么禁用输入框,否则该输入框是可以输入的
          if (region==="1"){
            this.disabledInput=true;
          }else {
            this.disabledInput=false;
          }

        }


      }
    }
</script>

<style scoped>


</style>

效果如下：