el-select的多选multible带全选组件二次封装(vue2,elementUI)

在Vue2和Element UI中，可以通过二次封装el-select组件来实现多选功能，并添加全选组件。以下是一个简单的示例：

1. 创建一个全选组件SelectAll.vue:

<template>
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
</template>
 
<script>
export default {
  props: {
    options: {
      type: Array,
      default: () => []
    },
    isIndeterminate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checkAll: false
    };
  },
  methods: {
    handleCheckAllChange(val) {
      if (val) {
        this.$emit('update:selected', this.options.map(item => item.value));
      } else {
        this.$emit('update:selected', []);
      }
    }
  }
};
</script>

2. 二次封装el-select组件，并使用全选组件SelectAll:

<template>
  <div>
    <select-all :options="options" :selected="selected" :is-indeterminate="isIndeterminate" @update:selected="handleSelectAll"></select-all>
    <el-select v-model="selected" multiple placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>
 
<script>
import SelectAll from './SelectAll.vue';
 
export default {
  components: {
    SelectAll
  },
  data() {
    return {
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        // ...更多选项
      ],
      selected: [],
      isIndeterminate: false,
    };
  },
  methods: {
    handleSelectAll(selected) {
      this.isIndeterminate = false;
      if (selected.length === this.options.length) {
        this.isIndeterminate = false;
      } else if (selected.length === 0) {
        this.isIndeterminate = false;
      } else {
        this.isIndeterminate = true;
      }
    }
  }
};
</script>

在这个例子中，SelectAll组件是一个可复用的全选组件，可以在多个地方使用。MultiSelect组件封装了el-select和全选组件，并处理了全选逻辑。在MultiSelect中，你可以通过options传入下拉菜单的选项，通过selected来获取或设置已选择的值，并且可以通过监听update:selected事件来响应全选操作。