el-select下拉框 添加 el-checkbox 多选框，支持全选、取消全选，选项选中了但是复选框未选中

在Vue的Element UI库中，如果你想在`el-select`（下拉选择框）里添加`el-checkbox`（多选框），以实现全选、取消全选以及选项选中但复选框未选中的功能，你可以这样做：

首先，在模板文件（如`.vue`文件）中，结构上可以组合使用这两个组件，例如：

<template>
  <div>
    <el-select v-model="selectedOptions">
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item.label"
        :value="item.value"
      >
        <!-- 你可以嵌套一个包含el-checkbox的项 -->
        <span>
          {{ item.label }}
          <el-checkbox v-model="item.selected" @change="toggleAll checkboxes"></el-checkbox>
        </span>
      </el-option>
    </el-select>

    <!-- 全选/取消全选按钮 -->
    <el-button type="primary" @click="selectAll">全选</el-button>
    <el-button type="default" @click="deselectAll">取消全选</el-button>
  </div>
</template>

接下来，在数据部分定义状态和方法：

<script>
export default {
  data() {
    return {
      selectedOptions: [], // 存储选中的option值
      options: [
        { label: '选项A', value: 'a', selected: false },
        { label: '选项B', value: 'b', selected: false },
        {/* ... */}
      ],
    };
  },
  methods: {
    toggleAll checkboxes(item) {
      this.options.forEach(option => (option.selected = item.selected));
    },
    selectAll() {
      this.options.forEach(option => option.selected = true);
      this.selectedOptions = this.options.map(option => option.value);
    },
    deselectAll() {
      this.options.forEach(option => option.selected = false);
      this.selectedOptions = [];
    },
  },
};
</script>

在这个例子中，`toggleAll checkboxes`方法用于同步所有`el-checkbox`的状态，而`selectAll`和`deselectAll`分别用于实现全选和取消全选的功能。