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>

 

經過我的踩坑，不能直接this.checked=[]或者等於null。因為綁定之后的數組里面有特定參數，也不能直接把this.checked=city
這就需要使用到“**includes**/包含”這個函數判斷包含不包含，再用三運算符把當前值給進去

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

 

注意checked與v-model綁定了所以必須要有值不然整個都顯示不出來，注意小細節

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

 

題外話：三運運算符 ？問號左邊的是判斷結果為true或false，只有？問號左邊為布爾值才能跳到右邊，如果為true就按循序得第一個[city]  為false就第二個

三元運算符  a ? b : c;
可以理解簡化為
        if(a){  a=b; }
         else{  a=c  }

 

希望上述內容能幫到你