Element checkbox 互斥

checkbox互斥.gif

industryList需要根据后台返回数据 根据需要的值放在:label中
checkbox 如果后台的值和展示需要的不一致 则使用
:label="item.id"
<...>{{item.keyname}}</...>

<el-form-item label="行业分类" prop="industries" >

          <el-checkbox-group v-model="curSelectedIndustryList">

            <el-checkbox style="margin-left: 10px;" label="所有" border size="medium" @change="handleChange"></el-checkbox>

            <el-checkbox v-for="item in industryList" :label="item.keyname" border size="medium" @change="handleChange"></el-checkbox>

          </el-checkbox-group>


        </el-form-item>

  data() {
      return {
        industryList: [],
        curSelectedIndustryList:[],
      };
    },

      handleChange(r,o){
        if(r == true){
          //选中
          if(o.target.defaultValue == "所有"){
            this.curSelectedIndustryList = ['所有'];
          }else{
            let containAllIdx = this.curSelectedIndustryList.indexOf("所有");
            if( containAllIdx > -1){
              this.curSelectedIndustryList.splice(containAllIdx);
              this.curSelectedIndustryList.push(o.target.defaultValue);
            }
          }
        }
      },