当前位置：首页 > news >正文

el-select的下拉选择框插入el-checkbox

news 来源：原创 2025/5/9 23:53:15

el-check注意这里要使用model-value绑定数据

<el-select
  v-model="selectDevice"
  multiple
  collapse-tags
  :multiple-limit="5"
  style="width: 200px"
  popper-class="select-popover-class"
>
  <el-option
    v-for="item in deviceList"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  >
    <el-checkbox :model-value="selectDevice.includes(item.value)">
      {{ item.label }}
    </el-checkbox>
  </el-option>
</el-select>

css样式处理：

/* 控制全选按钮样式 */
.select-popover-class .el-scrollbar__view > .el-checkbox {
	padding: 5px 20px;
}

/* 取消多选框触发事件 */
.select-popover-class .el-scrollbar__view > li .el-checkbox {
	pointer-events: none;
}

/* 隐藏多选框选中勾选样式 √ */
.select-popover-class .el-scrollbar__view > li::after {
	display: none;
}

完整代码：

<template>
  <div>
    <el-select
      v-model="selectDevice"
      multiple
      collapse-tags
      :multiple-limit="5"
      style="width: 200px"
      popper-class="select-popover-class"
    >
      <el-option
        v-for="item in deviceList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
        <el-checkbox :model-value="selectDevice.includes(item.value)">
          {{ item.label }}
        </el-checkbox>
      </el-option>
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const selectDevice = ref<Array<string>>([]);
const deviceList = ref([
  {
    value: "1",
    label: "设备1",
  },
  {
    value: "2",
    label: "设备2",
  },
  {
    value: "3",
    label: "设备3",
  },
  {
    value: "4",
    label: "设备4",
  },
]);
</script>

<style lang="scss" scoped>
/* 控制全选按钮样式 */
.select-popover-class .el-scrollbar__view > .el-checkbox {
  padding: 5px 20px;
}

/* 取消多选框触发事件 */
.select-popover-class .el-scrollbar__view > li .el-checkbox {
  pointer-events: none;
}

/* 隐藏多选框选中勾选样式 √ */
.select-popover-class .el-scrollbar__view > li::after {
  display: none;
}
</style>