vue学习笔记--Element全选效果

第一步：先实现单选效果，并将选项内容利用V-for循环

html
<el-checkbox>全选</el-checkbox>
<div style="margin-bottom:15px;"></div>
<el-checkbox-group>
<el-checkbox :label="item" v-for="item in cities" :key="item" >{{item}}</el-checkbox>
</el-checkbox-group>
script
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default{
data () {
return {
cities: cityOptions
}
}
};

效果如下：

20180828220711.png

第二步：v-model指令实现默认勾选项

html
<el-checkbox-group v-model="checked" >
<el-checkbox :label="item" v-for="item in cities" :key="item" >{{item}}</el-checkbox>
</el-checkbox-group>
<el-checkbox v-model="checkedAll" >全选</el-checkbox>
script
data () {
return {
checked:['上海','北京'],
checkedAll: false,
};
},

第三步:点击“全选”勾选全部，选项全部被勾选，勾选全部选项或者全部去掉勾选，“全选”也被勾选或者去掉勾选。
完整代码

html
<template>
<div>
<h4>checkbox-group</h4>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkedAll" @change="handleCheckAll" >全选</el-checkbox>
<div style="margin-bottom:15px;"></div>
<el-checkbox-group v-model="checked" @change="handleCheckCities">
<el-checkbox :label="item" v-for="item in cities" :key="item" >{{item}}</el-checkbox>
</el-checkbox-group>
</div>
</template>

script
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default{
name:'CheckboxAll',
data () {
return {
cities: cityOptions,
checked:['上海','北京'],
checkedAll: false,
isIndeterminate: true
};
},
methods: {
handleCheckAll (val) {
this.checked = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckCities (value) {
let checkedCount = value.length;
this.checkedAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
}
};
</script>

如图：

20180828222847.png