Element-ui框架checkbox复选框全选加回显功能

<template>
	<el-checkbox
		:indeterminate="isIndeterminate"
		v-model="checkAll"
        @change="handleCheckAllChange"
     >全选</el-checkbox>
	<el-checkbox-group
       v-model="checkedCities"
       @change="handleCheckedCitiesChange" >
     	<el-checkbox
       	 	width="100"
            style="margin-top: 20px"
            v-for="(item, index) in cities"
            :label="item.id"
            :key="index">
            {{ item.district }}
          </el-checkbox>
	</el-checkbox-group>
</template>
<script>
export default {
	data(){
		return{
		checkAll: false,
		      checkedCities: [],
		      cities: [],
		      isIndeterminate: true,
		}
		  methods: {
		  handleCheckAllChange(val) {
	   
	      const all = this.cities.map((item) => {
	        return item.id
	      })
	      this.checkedCities = val ? all : []
	      this.isIndeterminate = false
	    },
	   
	    handleCheckedCitiesChange(value) {
	      let checkedCount = value.length
	      this.checkAll = checkedCount === this.cities.length
	      console.log(this.checkAll)
	      this.isIndeterminate =
	        checkedCount > 0 && checkedCount < this.cities.length
	    },
		  }
}
</script>