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还是空。