根据输入框或者下拉选择框有没有值,改变按钮可不可用,及按钮颜色

<el-select v-model="selectData.id" placeholder="请选择">
    <el-option label="请选择" value=""></el-option>
         <el-option
              v-for="item in allData"
              :key="item.id"
              :label="item.id"
              :value="item.id">
    </el-option>
</el-select>
<el-button  size="mini" icon="iconfont icon-tianjia" 
    :disabled='isAddBtnDisabled'
    v-bind:class="addButtonStyle"
    >&nbsp;&nbsp;添加
/el-button>

<script>
    data () {
        return {
	    allData:{
		{id:''},
		{id:''}
	    },
	    selectData:{
	    	id:''
	    },
	    isAddBtnDisabled:false, //按钮是否可用
	    
        }
    },
    methods: {
        
    },
    //计算属性
    computed:{
	addButtonStyle(){
	    if(this.selectData.id != ''){
                this.isAddBtnDisabled = false;
                return 'addButtonAvailable';
            }else{
                this.isAddBtnDisabled = true;
                return 'addButtonUnAvailable';
            }
	}
    }
</script>

<style scoped lang="less">
    .addButtonAvailable {
        background-color: orange;
         color: #FFFFFF;
    }
    .addButtonUnAvailable {
        background-color: #7B7B7B;
        color: #FFFFFF;
    }
</style>

 

Logo

前往低代码交流专区

更多推荐