VUE——el-select实现下拉框全选功能

element-ui里的select的功能是右图这样的，只能一个一个的勾选；而我的需求是要有全选功能的：当点击全选时,下拉框全部选项都被选中；再点击时全部不选中；（如左图）。 这里为了实现这个功能，我采用了el-select里嵌套el-checkbox的方式来实现，我觉得很容易看懂，所以就不写那么啰嗦了，直接附上代码：

<el-form-item label="车型:" prop="carArray">
                    <el-select multiple
                        v-model="form.carArray" 
                        placeholder="请选择" 
                        size="small" 
                        @change="changeCar"
                        clearable collapse-tags>
                        <el-checkbox 
                            v-model="form.checked" 
                            @change=selectAll    
                            style="margin-left:20px">
                            全选
                        </el-checkbox>
                        <el-option
                            v-for="carItem in carsOptions"
                            :key="carItem.value"
                            :label="carItem.label"
                            :value="carItem.value">
                        </el-option>
                    </el-select>
</el-form-item>

一小部分是适应我的需求写的，大家主动忽略掉就行，主要看两个@change的方法——changeCar和selectAll

export default {
          
     
    data () {
          
   
        return {
          
   
            form:{
          
   
                checked:false,//全选
                carArray:[],//车型
            },
        }
    },
    methods: {
          
     
        // 车型全选
        changeCar(val){
          
   
            console.log(val)
            if (val.length === this.carsOptions.length) {
          
   
                this.form.checked = true
            } else {
          
   
                this.form.checked = false
            }
        },
        selectAll() {
          
   
            this.form.carArray = []
            if (this.form.checked) {
          
   
                this.carsOptions.map((item) => {
          
   
                    this.form.carArray.push(item.value)
                })
            } else {
          
   
                this.form.carArray = []
            }
            this.$emit(changeCar, {
          
   val:this.carArray,index:this.index});
        },
    }
}

其实原理也很简单就是，在changeCar里传个参数，判断val的长度是否等于carOptions的长度，如果等于，就将绑定的form.checked设置为true，否则就是false（true为勾选，false为不勾选）；selectAll里呐，就是先将carArray置空，遍历下拉框选项carOptions，判断checked是否选中，如果选中了，将carsOptions的元素全部放进carArray，否则carArray还是空。