【el-select 一键便捷全选】

基于el-select 二次封装

<template>
  <div>
    <!-- el-select 绑定的值 -->
    <el-select
      v-model="selectedValues"
      :multiple="multiple"
      :filterable="filterable"
      :clearable="clearable"
      :disabled="disabled"
      :collapse-tags="collapseTags"
      :placeholder="placeholder"
      :style="{width: width}"
      @change="handleChange"
    >
      <!-- 全选复选框 -->
      <div
        v-if="multiple"
        style="display: flex; align-items: center; padding: 0 20px;"
      >
        <el-checkbox
          v-model="isAllSelected"
          @change="handleSelectAll"
        >
          全选
        </el-checkbox>
      </div>
      <!-- 选项列表 -->
      <el-option
        v-for="item in options"
        :key="item[valueKey]"
        :label="item[labelKey]"
        :disabled="isOptionDisabled(item)"
        :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
        },
        // 禁选项
        disabled: {
            type: Boolean,
            default: false
        },
        collapseTags: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: String,
            default: '请选择'
        },
        disabledItem: {
            type: String,
            default: null
        },
        otherPropList: {
            type: Array,
            default: () => []
        },
        // 选项
        options: {
            type: Array,
            default: () => []
        },
        labelKey: {
            type: String,
            default: 'label'
        },
        valueKey: {
            type: String,
            default: 'value'
        },
        // 双向绑定的值,谨慎修改
        value: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {};
    },
    computed: {
        // eslint-disable-next-line vue/return-in-computed-property
        isAllSelected() {
            debugger;
            if (this.selectedValues) {
                debugger;
                let isAllSelected = [];
                const allValues = this.options.map(option => option[this.valueKey]);
                if (this.otherPropList.length > 0) {
                    // eslint-disable-next-line eqeqeq
                    isAllSelected = allValues.filter(f => !this.otherPropList.includes(f));
                } else {
                    isAllSelected = allValues;
                }
                return this.selectedValues.length === isAllSelected.length;
            }
        },
        selectedValues: {
            get() {
                debugger;
                return this.value;
            },
            set(val) {
                debugger;
                this.$emit('input', val);
            }
        }
    },
    methods: {
        handleSelectAll(valBloen) {
            debugger;
            let isAllSelected = [];
            const allValues = this.options.map(option => option[this.valueKey]);
            // eslint-disable-next-line eqeqeq
            if (this.otherPropList.length > 0) {
                isAllSelected = allValues.filter(f => !this.otherPropList.includes(f));
            } else {
                isAllSelected = allValues;
            }

            if (valBloen) {
                this.selectedValues = isAllSelected;
            } else {
                this.selectedValues = [];
            }
        },
        isOptionDisabled(item) {
            if (!this.otherPropList && this.otherPropList.length === 0) {
                return false;
            }
            // eslint-disable-next-line eqeqeq
            return this.otherPropList.includes(item[this.disabledItem]);
        },
        handleChange(val) {
            this.$emit('change', val);
        }
    }
};
</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>

示例图