今天做一個vue的多項選擇效果，引入了element ui中的checkbox插件，使用的是它的多選框組的ui插件，其中這些checkbox是通過后台返回數據動態進行渲染，在渲染的過程中遇見了一些很不正常的交互效果，要么是所有的checkbox都選中了，取消一個checkbox選中狀態就少一個checkbox，要么是選中一個checkbox，就會自動生成一個新的checkbox，搞得我暈頭轉向，后來經排查，原來是多選框組中v-model搞的鬼，也可能是我理解的不到位導致的，這里我做個解釋：
<el-checkbox-group v-model="queryCheckList" class="checkbox_css" @change="changeCheckbox">
<el-checkbox :label="item" v-for="item in checkList"></el-checkbox>
</el-checkbox-group>
以上是我的正確代碼，官方文檔代碼如下：
<template> <el-checkbox-group v-model="checkList"> <el-checkbox label="復選框 A"></el-checkbox> <el-checkbox label="復選框 B"></el-checkbox> <el-checkbox label="復選框 C"></el-checkbox> <el-checkbox label="禁用" disabled></el-checkbox> <el-checkbox label="選中且禁用" disabled></el-checkbox> </el-checkbox-group> </template> <script> export default { data () { return { checkList: ['選中且禁用','復選框 A'] }; } }; </script>
從范例中看出checkList和每一個el-checkbox中的lable是有關聯的，於是我就在處理動態數據的時候還原案例里的數據關系，但發現按照案例走，會出現上述我說的那兩種不正常的現象，下面是當時出現不正常現象的代碼
<el-checkbox-group v-model="checkList" class="checkbox_css" @change="changeCheckbox">
<el-checkbox :label="item" v-for="item in checkList"></el-checkbox>
</el-checkbox-group>
於是我開始找問題，發現checkList其實和每一個el-checkbox中的lable是可以分開處理的，就是v-model綁定的變量和label循環的時候所用的數組變量可以不是同一個，這樣就可以完美解決上述那些不正常的現象，然后在點擊checkbox時候觸發change事件，去給queryCheckList賦值即可
changeCheckbox(data) {
this.queryCheckList = data;
},