Vue學習筆記-遍歷el-checkout

<el-checkbox @change="handleCheckedCitiesChange"  
             v-model="checkAll"   
             :label="list.eventtypeid">
    全選
</el-checkbox>
 <el-checkbox-group v-model="checkOne" class="checkGroup">
      <el-checkbox  v-for="(operate,index1) in list.operation" 
                   :label="operate.actionid"   
                   :key="operate.actionid"  
                   @change="handleCheckedCitiesChange">
          {{operate.actionname}}
     </el-checkbox>
 </el-checkbox-group>

看上面的例子匙姜，都是把el-checkbox放在el-checkbox-group里面進行循環(huán)的饶号。

1.@change事件要優(yōu)于@click事件，可以把這個change加在el-checkbox-group上面。這樣每次點擊的checkbox框變化他都能捕捉到。也可以放在el-checkbox上面，這樣點擊時獲取的是你當時點擊的checkbox榄融。

2.v-model上面的值是你checkebox的選中的值，這里label綁定的是id（也就是我們想要獲取給后臺的）而不是顯示的內容救湖。而且必須寫個label賦值id愧杯，不然你寫name的話，他選擇時就把名字相同的都選中了鞋既。v-model寫在了checkbox-group上面力九。這樣獲取的就是循環(huán)的里面所有選中的，不是一條數組選中的邑闺。有了v-model就可以不用寫:checked屬性來決定他是否選中了跌前。如果選中了。你就在v-model綁定的那個數組里添加上這個id值就可以啦陡舅，如果取消選中就在數組里刪除這個值抵乓。

//刪除：比如this.actionid是我們想刪除的。
this.checkOne=this.checkOne.map(res=>{
        if(res!=this.actionid){return res;}
});
//添加：
this.checkOne.push(this.actionid);

element-ui 多選框組件el-checkbox-group,賦值取值

示例一：

示例.png

示例二：

示例2.png

servicesData:  [
                    {
                        "value":1,
                        "text":"視訊",
                        "name":"shix",
                        "type":"checkbox",
                        "child":[
                            {
                                "value":11,
                                "text":"智驛酒店電視系統(tǒng)"
                            }
                        ]
                    },
                    {
                        "value":2,
                        "text":"網絡",
                        "name":"wangl",
                        "type":"checkbox",
                        "child":[
                            {
                                "value":21,
                                "text":"客房WIFI免費"
                            }
                        ]
                    }
                ];

//js
for (let key in this.servicesData) {
        this.$set(this.services, key, [])
}
console.log(this.services);
console.log(JSON.stringify(this.services));

js打印:

js打印.png

模板渲染

 <!--注意看 v-model ,這里綁定的是service[index]-->
<el-form-item :label="item.text" v-for="(item,index) in servicesData">
    <el-checkbox-group v-model="services[index]" @change="getSelectedServices()">
                 <el-checkbox v-for="itemChild in item.child" :label="itemChild">
                         {{itemChild.text}}
                 </el-checkbox>
    </el-checkbox-group>
</el-form-item>

參考：

參考.png