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>
相关推荐
用户2519162427112 分钟前
Canvas之图像合成
前端·javascript·canvas
每天开心2 分钟前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
超凌3 分钟前
el-input-number出现的点击+-按钮频现不生效
前端
NicolasCage3 分钟前
Icon图标库推荐
vue.js·react.js·icon
三小河3 分钟前
contentEditable 实现可编辑区域
前端
一道雷11 分钟前
🧩 Vue Router嵌套路由新范式:无需嵌套 RouterView 的布局实践
前端·vue.js
Mintopia16 分钟前
🎯 光与面的命运交锋:Möller-Trumbore 线段三角形相交算法全解析
前端·javascript·计算机图形学
Ares-Wang23 分钟前
Vue》》@ 用法
前端·javascript·vue.js
心.c1 小时前
JavaScript单线程实现异步
开发语言·前端·javascript·ecmascript
爱分享的程序员1 小时前
前端面试专栏-前沿技术:31.Serverless与云原生开发
前端·javascript·面试