使用elementUI的Select组件增加全选功能

摘要

在elementUI的库中，select组件是没有全选这个操作的。但是在日常开发中我们难免会需要使用全选的时候。因此如果我们使用了select组件来完成全选操作，主要包括全选的几种逻辑

• 如果勾选了“全部”，那么我们将所有选项选中
• 如果取消“全部”，那么我们删除所有已选
• 如果取消一个非“全部字段的”的项，那么我们需要将已选中的“全部取消
• 如果选择了出“全部”之外的所有项，那么我们需要把包括“全部”的都勾选

效果如下：

关键词：element，select，全选

代码实现

<el-select v-model="value_" multiple @change="selectChangeHandle">
    <el-option :value='code' :label='name' v-for="{code,name} in options" :key='code'>
    </el-option>
</el-select>

data() {
	return {
		val: [],
		flag: false,//之前是否勾选了全部
		options: [{
			code: -1,
			name: '全部'
		}, {
			code: 0,
			name: '芒果',
		}, {
			code: 1,
			name: '苹果',
		}, {
			code: 2,
			name: '无花果',
		}, {
			code: 3,
			name: '无名果',
		},
		]
	}
}
,
props:{
    value:{},
    value_: {
      get() {
        return this.flag ? ['all_', ...this.modelValue] : this.modelValue;
      },
      set(val) {
        this.$emit('input', val)
        this.$emit('change', val)
        
      }
    }
},

methods: {
	selectChangeHandle(newArr) {
              if (!this.multiple) return;
              const curFlag = newArr.some((item) => item === 'all_'); //当前是否勾选了全部；
              let nextValue = [];
              if (this.flag !== curFlag) {
                this.flag = curFlag;
                nextValue = curFlag ?this.options.map((item) => item.value) : [];
              } else {
                this.flag = newArr.length === this.options.length - !this.flag;
                nextValue = newArr;
              }
              this.value_ = nextValue.filter((item) => item !== 'all_');
	}
}