封装el-select 全选 功能

Element UI自带的el-select组件没有全选功能，只能自己封装了

<div id="app">
		<el-select clearable v-model="selectedData" multiple filterable @change="handleChange">
			<slot><el-checkbox style="margin:8px 0 8px 20px;width: 85%;" label="全选" v-model="checkedAll" @change="handleChangeAll"></el-checkbox></slot>
			<el-option v-for="item in list" :label="item.name" :key="item.id" :value="item.id"></el-option>
		</el-select>
		<el-button type="primary" @click="handleClick">获取</el-button>
	</div>
	<script type="text/javascript">
		const vm = new Vue({
			el:'#app',
			data(){
				return {
					selectedData:[],
					list:[
						{name:'zs1',id:1},
						{name:'zs2',id:2},
						{name:'zs3',id:3},
						{name:'zs4',id:4},
						{name:'zs5',id:5},
						{name:'zs6',id:6},
						{name:'zs7',id:7},
						{name:'zs8',id:8}
					],
					checkedAll:false
				}
			},
			methods:{
				handleClick(){
					console.log(this.selectedData)
				},
				//点击全选
				handleChangeAll(val){
					if(val){
						for(const index in this.list){
							this.selectedData.push(this.list[index]['id'])  
						}
					}else{
						this.selectedData.splice(0)
					}
				},
				//选中的值改变时候触发
				handleChange(e){
					if(e.length == this.list.length){
						this.selectedData.splice(0)
						for(const index in this.list){
							this.selectedData.push(this.list[index]['id'])  
						}
						this.checkedAll = true
					}else{
						this.checkedAll = false
					}
				}
			},
			
		})
	</script>