根據輸入框或者下拉選擇框有沒有值,改變按鈕可不可用,及按鈕顏色
<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"
> 添加
/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>