【el-select 一键便捷全选】

基于el-select 二次封装

<template>
  <div>
    <!-- el-select 绑定的值 -->
    <el-select
      v-model="selectedValues"
      :multiple="multiple"
      :filterable="filterable"
      :clearable="clearable"
      :placeholder="`请选择${name}`"
      :style="{width: width}"
    >
      <!-- 全选复选框 -->
      <div
        v-if="multiple"
        style="display: flex; align-items: center; padding: 0 20px;"
      >
        <el-checkbox
          :value="isAllSelected"
          @change="handleSelectAll"
        >
          全选
        </el-checkbox>
      </div>
      <!-- 选项列表 -->
      <el-option
        v-for="item in options"
        :key="item[valueKey]"
        :label="item[labelKey]"
        :value="item[valueKey]"
      />
    </el-select>
  </div>
</template>

<script>
export default {
    /**
   *** 作者: Lenovo-【Lindon】
   *** 文件名称: SelectAll
   *** 文件创建日期: 2025/3/20 10:36
   ***
   */
    name: 'SelectAll',
    props: {
        multiple: {
            type: Boolean,
            default: true
        },
        width: {
            type: String,
            default: '370px'
        },
        filterable: {
            type: Boolean,
            default: true
        },
        clearable: {
            type: Boolean,
            default: true
        },

        name: {
            type: String,
            default: ''
        },
        // 选项
        options: {
            type: Array,
            default: () => []
        },
        labelKey: {
            type: String,
            default: 'label'
        },
        valueKey: {
            type: String,
            default: 'value'
        },
        // 已选中的值
        // 双向绑定的值,谨慎修改
        value: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {};
    },
    computed: {
    // 判断是否全选
        isAllSelected() {
            if (this.selectedValues) {
                const allValues = this.options.map(option => option[this.valueKey]);
                return this.selectedValues.length === allValues.length;
            }
        },
        // 双向绑定选中值
        selectedValues: {
            get() {
                debugger;
                return this.value;
            },
            set(val) {
                debugger;
                this.$emit('input', val);
            }
        }
    },
    methods: {
    // 全选逻辑
        handleSelectAll(val) {
            const allValues = this.options.map(option => option[this.valueKey]);
            if (val) {
                // 如果勾选全选，则将所有选项的值添加到选中值中
                this.selectedValues = allValues;
            } else {
                // 如果取消全选，则清空选中值
                this.selectedValues = [];
            }
        }
    }
};
</script>

<style scoped>
/* 全选复选框样式 */
.el-checkbox {
  margin-bottom: 10px;
}
</style>

页面组件应用

        <el-form-item
          label="合作店面"
          prop="orgIds"
        >
          <SelectAll
            v-model="form.orgIds"
            name="工作地方"
            width="370px"
            :options="AllOrg"
            :label-key="'name'"
            :value-key="'id'"
          />
        </el-form-item>

示例图