基于elementUI封装的带复选框el-checkbox的下拉多选el-select组件

在使用Element UI的el-select组件时，可以通过插槽（slot）来自定义下拉菜单的内容，包括复选框。以下是一个简化版的示例代码，演示了如何封装一个带复选框的下拉多选组件：

<template>
  <el-select
    v-model="selectedValues"
    multiple
    placeholder="请选择"
    @change="handleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
      <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValues: [],
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        // ...更多选项
      ],
    };
  },
  methods: {
    handleChange(value) {
      // 处理选中值变化
      console.log('Selected:', this.selectedValues);
    },
  },
};
</script>

在这个例子中，el-select组件被设置为可多选（multiple属性），并且每个选项都通过el-option组件来定义，其中包含了el-checkbox组件。复选框的label与选项的值通过v-for和v-bind绑定。当选中的值发生变化时，通过@change事件处理器来处理选中的值。