Vue el 使用el-checkbox-group复选框进行单选框操作

让复选框进行单选框操作

el-checkbox-group这个组件与其他复选框不一样，我当初也是半天不知道怎么操作

页面使用v-model绑定 size就是等比例缩小放大，v-ror循环应该看的懂。重要的是@chage到我们写的类

        <el-checkbox-group v-model="checked" size="medium">
          <el-checkbox-button v-for="city in cities" :label="city" :key="city" @change="checkbox(city)">{{ city }}
          </el-checkbox-button>
         </el-checkbox-group>

注意checked与v-model绑定了所以必须要有值不然整个都显示不出来，注意小细节

  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data () {
      return {
        checked: ['上海'],//不能为null，必须要有值
        cities: cityOptions
      };
    }
  }

经过我的踩坑，不能直接this.checked=[]或者等于null。因为绑定之后的数组里面有特定参数，也不能直接把this.checked=city
这就需要使用到“includes/包含”这个函数判断包含不包含，再用三运算符把当前值给进去

    checkbox(city) {
      this.checked = this.checked.includes(city) ? [city] : [];
    },

题外话：三运运算符 ？问号左边的是判断结果为true或false，只有？问号左边为布尔值才能跳到右边，如果为true就按循序得第一个[city] 为false就第二个

三元运算符  a ? b : c;
可以理解简化为
        if(a){  a=b; }
         else{  a=c  }

希望上述内容能帮到你