<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.0/lib/index.js"></script>
<div id="app">
<el-checkbox v-model="isCheckAll" @change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.name}}</el-checkbox>
</el-checkbox-group>
</div>
const cityOptions = [{id:1,name:'上海'}
,{id:2,name:'北京'}
,{id:3,name:'广州'}
,{id:4,name: '深圳'}];
const checkedOptions=[1,2]
var Main = {
data() {
return {
cities:cityOptions,
checkedCities: checkedOptions,
isCheckAll: cityOptions==checkedOptions,
};
},
methods: {
handleCheckAllChange(val) {
var allids=new Array()
for(var i=0;i<cityOptions.length;i++){
allids[i]=cityOptions[i].id
}
this.checkedCities = val ? allids : [];
console.log(this.checkedCities);//显示选中内容
},
handleCheckedCitiesChange(value) {
this.isCheckAll=value.length==cityOptions.length
console.log(this.checkedCities);//显示选中内容
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')