el-checkbox-的某些需求应用
//显示为:全部、蚜虫、贪夜蛾、地老虎......
//点击全部时,其余按钮为未选中状态,点击其余任意几个按钮时,全部按钮为未选中状态
<el-checkbox-group v-model='monitemnameList' @change='changeMonitem' size="small">
<el-checkbox-button label="">全部</el-checkbox-button>
<el-checkbox-button v-for='(item,index) in pestList' :key='index'
:label='item.monitemname'>{{ item.monitemname }}</el-checkbox-button>
<el-checkbox-button disabled v-if='showmore' >
//当选项太多时,需要隐藏,点击更多在显示全部
<a href='javascript:void(0);' v-if='showmore' @click='showMorePest'>
<i :class='icon'></i>{{ more }}</a>
</el-checkbox-button>
</el-checkbox-group>
changeMonitem(val){
let me=this;
if(val[val.length-1]!==''){
if (val.includes('')) {
me.monitemnameList = val.filter(item => item !== '');
}else {
if (val.length>0) {
me.monitemnameList = val;
}else {
me.monitemnameList = [''];
}
}
}else{
me.monitemnameList = [''];
}
//此处是为了传值,有时需要名称,有时需要id,按需写
me.searchParams.monitemname='';
me.searchParams.monitemname=me.monitemnameList.join(',');
me.queryResultData();
},
//比17个选项多收起
showMorePest(){
let me = this;
if (me.showPests) {
me.icon = 'el-icon-arrow-left';
me.more = '收起';
me.pestList = [];
me.pestList = me.allpestList;
me.showPests = false;
} else {
if (me.pestList.length>17) {
me.icon = 'el-icon-arrow-right';
me.more = '更多';
me.pestList = me.pestList.slice(0,17);
me.showPests = true;
}else{
me.icon = 'el-icon-arrow-right';
me.more = '更多';
me.showPests = true;
}
}
},