思路：弃用el-checked-group使用el-checked模拟
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css"> </head> <body> <div id="app"> <div style="margin: 15px 0;"></div> <div v-for="city in cities"> <el-checkbox :label="city" :key="city.id" :checked=indexOf(city,checkedCities) @change=change(city,indexOf(city,checkedCities)) >{{city.name}}</el-checkbox> </div> {{ result }} </div> </body> <!-- import Vue before Element --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- import JavaScript --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script> <script> new Vue({ el: '#app', data: function () { return { checkAll: false, result:[], checkedCities: [{ name: "上海", id: 1 }], cities: [{ name: "上海", id: 1 }, { name: "北京", id: 2 } ], isIndeterminate: true } }, created(){ this.$nextTick(() => { this.result = this.checkedCities }) }, methods: { indexOf(item, items) { console.log(items.indexOf(item)) items = JSON.stringify(items) item = JSON.stringify(item) if(items.indexOf(item) > -1 ){ return true }else{ return false } }, change(e,c){ if(c){ this.result.forEach((value, index, array) => { if (e.id == value.id) { this.result.splice(index, 1) } }) }else{ this.result.push(e) } } } }) </script> </html>
