Checkbox 多选框

上源码：

<template>
	<div id="app">
		<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
		<div style="margin: 15px 0;"></div>
		<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
			<el-checkbox v-for="city in cities" :label="city" :key="city.index">{{city.lable}}</el-checkbox>
		</el-checkbox-group>
	</div>
</template>

<script>
	const cityOptions = [{
		id: '1',
		lable: '山东'
	}, {
		id: '2',
		lable: '北京'
	}, {
		id: '3',
		lable: '上海'
	}];
	export default {
		name: 'App',
		data() {
			return {
				checkAll: false,
				checkedCities: [],
				cities: cityOptions,
				isIndeterminate: true
			}
		},
		methods: {
			handleCheckAllChange(val) {
				this.checkedCities = val ? cityOptions : [];
				this.isIndeterminate = false;
			},
			handleCheckedCitiesChange(value) {
				let checkedCount = value.length;
				this.checkAll = checkedCount === this.cities.length;
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
			}
		}
	}
</script>