el-select下拉框实现复选框多选、全选？

Question

背景：

版本：
vue: '3.3.4'
element-plus: '2.3.7'

el-select的基础多选功能的下拉框需要替换成el-checkbox复选框;

尝试实现代码如下：

<template>
  <el-select v-model="data" multiple popper-class="select-popover-class">
    <el-checkbox :value="selectAll" @change="selectAllHandle"
      >全选</el-checkbox
    >
    <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label">
      <el-checkbox :value="item.checked" :label="item.label" />
    </el-option>
  </el-select>
</template>

<script setup>
  import { ref, computed } from 'vue';

  const data = ref([]);
  const options = ref([
    { label: '选项1', value: 1, checked: false },
    { label: '选项2', value: 2, checked: true },
    { label: '选项3', value: 3, checked: false },
  ]);
  const flag = ref(true);

  const selectAll = computed(() => {
    const selectMap = options.value.map(item => item.checked);
    return selectMap.length === options.value.length
  });

  const selectAllHandle = (bool) => {
    options.value.forEach((item) => {
      item.checked = bool;
    });
  };
</script>

<style scoped>
  /* 自定义样式 */
  .select-popover-class .el-checkbox {
    padding: 5px 20px;
  }
</style>

样式实现了，但是逻辑上还有如下问题：

1. 全选功能未能关联单项;
2. 选择单个选框时，下拉框关闭了。

尝试2

<template>
  <el-select v-model="data" multiple popper-class="select-popover-class">
    <el-checkbox :value="selectAll" @change="selectAllHandle"
      >全选</el-checkbox
    >
    <el-checkbox-group v-model="data" @change="changeHandle">
      <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label">
      <el-checkbox  :label="item.label" />
    </el-option>
    </el-checkbox-group>
    
  </el-select>
</template>

<script setup>
  import { ref, computed } from 'vue';

  const data = ref(['选项1','选项2']);
  const options = ref([
    { label: '选项1', value: 1 },
    { label: '选项2', value: 2},
    { label: '选项3', value: 3 },
  ]);
  const flag = ref(true);

  const selectAllHandle = (bool) => {
    data.value = bool ? options.value.map(item => item.label) : [];
  };

  const changeHandle = (val) => {
    console.log(val,'val');
  }
</script>

<style scoped>
  /* 自定义样式 */
  .select-popover-class .el-checkbox {
    padding: 5px 20px;
  }
</style>

全选关联单项已实现，但是还有单项选不中，点击单选选择下拉框关闭的问题

Answer 1

修复单项选择

单项选择的问题是由于 el-checkbox 嵌套在 el-option 内部。可以直接使用 el-checkbox，而不嵌套在 el-option 内。

防止选择时下拉框关闭

为了防止选择项目时下拉框关闭，可以在复选框上使用 @click.stop 指令，阻止点击事件传播并关闭下拉框。
以下是更新后的代码：

<template>
  <el-select v-model="data" multiple popper-class="select-popover-class" @visible-change="handleVisibleChange">
    <el-checkbox :indeterminate="isIndeterminate" v-model="selectAll" @change="selectAllHandle">全选</el-checkbox>
    <el-checkbox-group v-model="data" @change="changeHandle">
      <el-checkbox v-for="item in options" :key="item.value" :label="item.label" @click.stop>{{ item.label }}</el-checkbox>
    </el-checkbox-group>
  </el-select>
</template>

<script setup>
import { ref, computed } from 'vue';

const data = ref(['选项1', '选项2']);
const options = ref([
  { label: '选项1', value: 1 },
  { label: '选项2', value: 2 },
  { label: '选项3', value: 3 },
]);
const selectAll = ref(false);

const isIndeterminate = computed(() => {
  return data.value.length > 0 && data.value.length < options.value.length;
});

const selectAllHandle = (bool) => {
  data.value = bool ? options.value.map(item => item.label) : [];
};

const changeHandle = (val) => {
  selectAll.value = val.length === options.value.length;
  console.log(val, 'val');
};

const handleVisibleChange = (visible) => {
  if (!visible) {
    // 处理下拉框关闭时的额外逻辑
  }
};
</script>

<style scoped>
/* 自定义样式 */
.select-popover-class .el-checkbox {
  padding: 5px 20px;
}
</style>

关键更改

1. 直接在 el-select 中使用复选框：

   • 将 el-checkbox 直接放置在 el-select 中，而不嵌套在 el-option 内部，从而简化了结构。

2. 阻止事件传播：

   • 使用 @click.stop 指令，防止点击事件传播，避免下拉框在选择项目时关闭。

3. 不确定状态：

   • 添加了 isIndeterminate 计算属性，以处理“全选”复选框的不确定状态。

Answer 2

根据你尝试2 改了一下
https://element-plus.run/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA...