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

       element-ui里的select的功能是右图这样的，只能一个一个的勾选；而我的需求是要有全选功能的：当点击全选时,下拉框全部选项都被选中；再点击时全部不选中；（如左图）。我这个小菜鸟都能遇到，相信很多人也都遇到了，然而在我百度方法时搜到的却不多，因此来CSDN记录一下。

       这里为了实现这个功能，我采用了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还是空。

---------写在最后----------------------------------------------------------------------------------------------------------

        直接附上的代码段，大家可以直接复制修改，而我搜到的都是图片，还得放大图片自己比着敲，呜呜呜，忽然觉得我真好。咳咳咳，废话不多说，如果你有更好的实现方法，可以评论区留言告诉我哦，让我这个小菜鸟多长长见识……