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

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

html 复制代码
<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样式处理:

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;
}

完整代码:

html 复制代码
<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>
相关推荐
袁煦丞33 分钟前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码41 分钟前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
Liudef0642 分钟前
2048小游戏实现
javascript·css·css3
鱼樱前端2 小时前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig3 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少3 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder3 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix3 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句3 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易3 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员