el-select下拉框 添加 el-checkbox 多选框，支持全选、取消全选

在Element UI中，el-select组件不支持直接嵌套el-checkbox组件来实现多选功能。但是，你可以使用el-select的多选功能，或者自定义下拉多选框。

以下是使用Element UI中的el-select组件实现多选下拉框，并支持全选和取消全选的示例代码：

<template>
  <div>
    <el-select
      v-model="selectedOptions"
      multiple
      placeholder="请选择"
      @change="handleChange"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-checkbox v-model="isSelectAll" @change="handleSelectAll">全选</el-checkbox>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' },
        // ...更多选项
      ],
      isSelectAll: false,
    };
  },
  methods: {
    handleChange(value) {
      this.isSelectAll = value.length === this.options.length;
    },
    handleSelectAll(value) {
      if (value) {
        this.selectedOptions = this.options.map(item => item.value);
      } else {
        this.selectedOptions = [];
      }
    },
  },
};
</script>

在这个例子中，el-select组件通过设置multiple属性实现多选功能。selectedOptions数组用来存储选中的值。el-checkbox组件用来提供全选的功能，当它的状态改变时，会触发handleSelectAll方法，如果选中则将所有选项的值添加到selectedOptions数组中，如果未选中则清空数组。el-select的@change事件监听选项变化，如果所有选项都被选中了，则切换全选的复选框状态。