el-select下拉框 添加 el-checkbox 多选框

效果


vue

javascript 复制代码
<el-select v-model="value" multiple style="width: 100%" popper-class="select-popover-class" placeholder="请选择试验项目">
	<el-option 
	v-for="item in options" 
	:key="item.value" 
	:value="item.value"
	:label="item.label" >
	<el-checkbox :value="options.includes(item.value)" :label="item.label"></el-checkbox>
	</el-option>
</el-select>

<script>
  export default {
    data() {
      return {
        value: [],
        options: [
        {
            label: '选项一',
            value: 1
        },
        {
            label: '选项二',
            value: 2
        }
    ]
      }
    }
  };
</script>  

css

css 复制代码
<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>

参考

el-select下拉框 添加 el-checkbox 多选框,支持全选、取消全选

相关推荐
程序员爱钓鱼20 分钟前
Go语言实战:图的邻接表表示法实现详解
javascript·后端·go
无名客01 小时前
npm run dev 启动项目 报Error: listen EACCES: permission denied 0.0.0.0:80 解决方法
前端·javascript·vue.js
零点七九1 小时前
vue npm install卡住没反应
前端·vue.js·npm
墨菲安全1 小时前
NPM组件 @0xme5war/apicli 等窃取主机敏感信息
前端·npm·node.js·主机信息窃取·npm恶意包·npm投毒
Komorebi_99991 小时前
vue create 项目名 和 npm init vue@latest 创建vue项目的不同
前端·vue.js·npm
好好研究4 小时前
使用JavaScript实现轮播图的自动切换和左右箭头切换效果
开发语言·前端·javascript·css·html
paopaokaka_luck6 小时前
基于Spring Boot+Vue的吉他社团系统设计和实现(协同过滤算法)
java·vue.js·spring boot·后端·spring
伍哥的传说8 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
程序视点8 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian9 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue