el-checkbox-group多选

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;
        }
      }
    },