el-checkbox-group多选和选择全部问题

项目中有个需求 搜索学校的时候有选择全部和多选省份的功能 使用用element ui的多选功能 做些修改和封装

先上效果

1多选

2 选择了全部 

html

 <div class="sf"> <label for="" class="sfdq">就读地区</label>
              <el-checkbox-group v-model="checkedsf" @change="handleCheckedCitiesChange"
                style="display: inline-block;width: 850px;" class="sfcheckbox">
                <el-checkbox v-for="item in sf" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox>
              </el-checkbox-group>
            </div>

 data

 sf: [
        {
          type: "zytb_school_type",
          value: "",
          label: "全部"
        },
        {
          type: "zytb_school_type",
          value: "110000",
          label: "北京"
        },
        {
          type: "zytb_school_type",
          value: "120000",
          label: "天津"
        },
        {
          type: "zytb_school_type",
          value: "130000",
          label: "河北"
        },
        {
          type: "zytb_school_type",
          value: "140000",
          label: "山西"
        },
        {
          type: "zytb_school_type",
          value: "150000",
          label: "内蒙古"
        },
        {
          type: "zytb_school_type",
          value: "210000",
          label: "辽宁"
        },
        {
          type: "zytb_school_type",
          value: "220000",
          label: "吉林"
        },
        {
          type: "zytb_school_type",
          value: "230000",
          label: "黑龙江"
        },
        {
          type: "zytb_school_type",
          value: "310000",
          label: "上海"
        },
        {
          type: "zytb_school_type",
          value: "320000",
          label: "江苏"
        },
        {
          type: "zytb_school_type",
          value: "330000",
          label: "浙江"
        },
        {
          type: "zytb_school_type",
          value: "340000",
          label: "安徽"
        },
        {
          type: "zytb_school_type",
          value: "350000",
          label: "福建"
        },
        {
          type: "zytb_school_type",
          value: "360000",
          label: "江西"
        },
        {
          type: "zytb_school_type",
          value: "370000",
          label: "山东"
        },
        {
          type: "zytb_school_type",
          value: "410000",
          label: "河南"
        },
        {
          type: "zytb_school_type",
          value: "420000",
          label: "湖北"
        },
        {
          type: "zytb_school_type",
          value: "430000",
          label: "湖南"
        },
        {
          type: "zytb_school_type",
          value: "440000",
          label: "广东"
        },
        {
          type: "zytb_school_type",
          value: "450000",
          label: "广西"
        },
        {
          type: "zytb_school_type",
          value: "460000",
          label: "海南"
        },
        {
          type: "zytb_school_type",
          value: "500000",
          label: "重庆"
        },
        {
          type: "zytb_school_type",
          value: "510000",
          label: "四川"
        },
        {
          type: "zytb_school_type",
          value: "520000",
          label: "贵州"
        },
        {
          type: "zytb_school_type",
          value: "530000",
          label: "云南"
        },
        {
          type: "zytb_school_type",
          value: "540000",
          label: "西藏"
        },
        {
          type: "zytb_school_type",
          value: "610000",
          label: "陕西"
        },
        {
          type: "zytb_school_type",
          value: "620000",
          label: "甘肃"
        },
        {
          type: "zytb_school_type",
          value: "630000",
          label: "青海"
        },
        {
          type: "zytb_school_type",
          value: "640000",
          label: "宁夏"
        },
        {
          type: "zytb_school_type",
          value: "650000",
          label: "新疆"
        },
        {
          type: "zytb_school_type",
          value: "710000",
          label: "台湾"
        },
        {
          type: "zytb_school_type",
          value: "810000",
          label: "香港"
        },
        {
          type: "zytb_school_type",
          value: "820000",
          label: "澳门"
        },
      ],

methods:

 //选择省份
    handleCheckedCitiesChange(value) {
//点了全部 全部对应的值为空
      if (value.includes('') && value[value.length - 1] == '') {
        //最后点了全部 其他高亮取消 只高亮全部  传值为空
        this.checkedsf = []
        this.checkedsf.push('')
      } else if (value.includes('') && value[0] == '') {
        //点了全部 取消全部 点其他的
        value.splice(value.indexOf(''), 1)
        this.checkedsf = value
      } else {
        //没有点全部
        this.checkedsf = value
      }
      this.pageNo = 1 //分页从第一页
      this.GetSchjhInfos(this.schoolLIstType, this.checkedsf, this.checkedyxlx, this.checkedbxlx, this.checkedxyts, this.input3, this.input4) //调取查询接口
    },

至于element的前面复选框的问题 样式里把复选框dispaly:none就可以了