element-plus版本过老,自写选项弹框增删功能


title: element-plus版本过老,自写选项弹框增删功能
date: 2024-10-31 10:53:18
tags: element-plus

1.情景

发现代码怎么都用不了el-select的#footer插槽从而实现不了相关的操作,发现el-select自带的管理相关数据的属性popper-class用不了。

2.原因与方案

1.版本不是很新,用不了相关的插槽,更新element-plus的同时记得还要更新vite,要不然可能会报错。还有第二种方法,自写相关的方法。

2.popper-class直接用不了相关的css属性,具体原因不明,但是有具体解决方法,就是去掉scope。

3.自写代码

<el-dialogv-model="showContestDialog"@closed="showContestDialog = false"style="width: 370px; height: 535px"title="比赛与奖项":align-center="true"><div style="margin-bottom: 30px" class="select-container"><span>比赛:</span><el-selectv-model="selectContent"placeholder="比赛信息"style="width: 320px; margin-right: 20px; max-height: 1000px"filterableclass="custom-select"popper-class="custom-popper"><div class="select-options-container"><el-optionv-for="item in contestNames":key="item":label="item":value="item"><div style="display: flex; justify-content: space-between"><span>{{ item }}</span><el-buttonsize="small"type="danger"plain@click.stop="confirmDelete(item)">X</el-button></div></el-option><el-option disabled label="暂无更多数据" /></div><div class="select-footer"><el-buttonv-if="!isAddingContent"size="small"textbg@click="onAddContent">增加比赛</el-button><div v-else><el-inputv-model="addContentName"style="width: 100%; margin-bottom: 10px"placeholder="请输入新比赛名称"size="small"/><el-buttontype="primary"size="small"@click="onConfirmAddContent">确认</el-button><el-button size="small" @click="clearAddContent">取消</el-button></div></div></el-select></div><div class="select-container"></div><span>奖项:</span><el-selectv-model="selectAward"placeholder="比赛信息"style="width: 320px"filterablepopper-class="custom-popper"class="custom-select":disabled="!selectContent"><div class="select-options-container"><el-optionv-for="item in awardsNames":key="item":label="nameScore(item)":value="item"><div style="display: flex; justify-content: space-between"><span>{{ item }}</span><el-buttonsize="small"type="danger"plain@click.stop="confirmDeleteAward(item)">X</el-button></div></el-option><el-option disabled label="暂无更多数据" /></div><div class="select-footer"><el-buttonv-if="!isAddingAward"textbgsize="small"@click="onAddAward">增加奖项</el-button><template v-else><span>奖项:</span><el-inputv-model="addAwardName"style="width: 35%; margin-bottom: 5px; margin-right: 10px"placeholder="请输入奖项字符"size="small"/><span>分数:</span><el-inputv-model="addAwardNameScore"style="width: 35%; margin-bottom: 5px"placeholder="请输入积分数字"size="small"/><el-button type="primary" size="small" @click="onConfirmAddAward">确定</el-button><el-button size="small" @click="clearAddAward">取消</el-button></template></div></el-select></el-dialog>

样式部分

<style lang="scss">.select-container {position: relative;
}.select-options-container {min-height: 20px;// max-height: 300px; /* 设置最大高度,超出则显示滚动条 */// overflow-y: auto; /* 添加垂直滚动条 */padding-bottom: 60px;// scrollbar-width: thin;// scrollbar-color: #f5f5f5 #fff; /* 滚动条轨道和滑块的颜色 */
}/* 这个内容给出来是用来展示全部的选项的,要是没有相关需求可以注释掉 */
.custom-popper {.el-scrollbar__wrap {max-height: initial;overflow: visible; //超出部分不滚动,直接显示}.el-scrollbar__thumb {display: none; //去掉右侧滚动条}
}.custom-popper .el-scrollbar__wrap {overflow-y: hidden; /* 允许垂直滚动 */overflow-x: hidden; /* 隐藏水平滚动条 */
}.select-footer {/* 自定义底部内容样式 */padding: 5px;border-top: 1px solid #e0e1e3;background-color: #fff;position: absolute;bottom: 0;width: 100%;z-index: 10; /* 确保自定义底部内容在弹出层之上 */
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/59015.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java项目之文理医院预约挂号系统源码(springboot)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的文理医院预约挂号系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息。 项目简介&#xff1a; 本系统的使用角色可…

Ubuntu 通过Supervisor 或者 systemd 管理 .Net应用

在 Ubuntu 上安装 .NET 8.0&#xff0c;通过 supervisor 或 systemd 管理 .NET 应用服务&#xff0c;确保应用能够自动启动、运行以及在崩溃时重启。 1. 安装 .NET 8.0 最新的Ubuntu版本已经不需要注册 Microsoft 包存储库了&#xff0c;具体的可以参考微软官方文档安装&…

spring 学习路线梳理(二)注解

1.通过注解的方式创建bean 1.1 定义dao层的接口和实现 public interface ILoginDao {public String login(); }Slf4j Repository public class LoginDaoImpl implements ILoginDao {public LoginDaoImpl(){System.out.println("spring create bean call");}Override…

具有特定结构和功能的化学试剂——反式环辛烯-聚乙二醇-硅烷TCO-PEG-Silane

TCO-PEG-Silane&#xff0c;即反式环辛烯-聚乙二醇-硅烷&#xff0c;是一种具有特定结构和功能的化学试剂。 一、基本性质 外观&#xff1a;通常为白色固体&#xff0c;但具体外观可能因分子量、制备方法和存储条件的不同而有所变化。 溶解性&#xff1a;易溶于多种有机溶…

Blender进阶:着色器节点

11 着色器节点 11.1着色器 着色器Shader&#xff0c;负责给物体表面着色。 综合以下参数&#xff1a; -基础色-金属度、粗超度、透明度-法向-入射光颜色、强度、角度。。 着色器本质上是一段程序、算法&#xff0c;即着色器编程。 在节点编辑器中&#xff0c;支持算法的可…

状态检测防火墙报文处理发流程

华为大同&#xff1a;全系列状态检测防火墙报文处理流程 华为防火墙在处理报文时&#xff0c;其核心在于其状态检测与会话机制&#xff1a;当防火墙接收到报文后&#xff0c;它会在特定时间和条件下创建会话&#xff0c;并对那些与会话表匹配的报文进行特定的转发处理。基于这一…

深入探讨SEO分析技巧助力网站流量提升

内容概要 在当前的数字化时代&#xff0c;SEO分析的重要性不言而喻。它是提升网站流量的关键工具&#xff0c;帮助站长有效地优化网站内容和结构。通过系统的SEO分析&#xff0c;站长可以掌握用户搜索行为和需求&#xff0c;从而制定出更具针对性的内容策略。例如&#xff0c;…

【天线&通讯】电力设施检测系统源码&数据集全套:改进yolo11-RFCAConv

改进yolo11-DAttention等200全套创新点大全&#xff1a;电力设施检测系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.11.01 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示”展示的系统图片或者…

18.农产品销售系统(基于springboot和vue的Java项目)

目录 1.系统的受众说明 2.开发环境与技术 2.1 Java语言 2.2 MYSQL数据库 2.3 IDEA开发工具 2.4 Spring Boot框架 3.系统分析 3.1 可行性分析 3.1.1 技术可行性 3.1.2 经济可行性 3.1.3 操作可行性 3.2 系统流程 3.2.1 操作流程 3.2.2 登录流程 3.2.3 删除信…

uni-app发起请求以及请求封装,上传及下载功能(六)

文章目录 一、发起网络请求1.使用及封装2. https 请求配置自签名证书3.拦截器 二、上传下载1.上传 uni.uploadFile(OBJECT)2. 下载 uni.downloadFile(OBJECT) 一、发起网络请求 uni-app中内置的uni.request()已经很强大了&#xff0c;简单且好用。为了让其更好用&#xff0c;同…

地理信息科学专业想搞GIS开发:学前端还是后端?

地理信息科学专业的同学是学前端开发比较好呢还是学后端开发比较好呢&#xff1f; 部分网友&#xff1a;学前端更好 主修前端更好&#xff0c;因为地信学后端&#xff0c;是卷不赢学计算机的 本科卷前端&#xff0c;硕士阶段可以卷后端 甚至有网友直呼&#xff0c;地信根本没有…

美格智能5G车规级通信模组:以连接+算力驱动智能化进阶

2023年3月&#xff0c;基于高通公司第二代骁龙汽车5G调制解调器及射频系统平台SA522M/SA525M&#xff0c;美格智能在德国纽伦堡嵌入式系统展上正式发布全新一代5G车规级C-V2X通信模组MA922系列&#xff0c;迅速引起行业和市场关注。随着5G高速网联逐步成为智能汽车标配&#xf…

真题与解析 202203三级 青少年软件编程(Python)考级

青少年软件编程(Python)等级考试试卷(三级) 202203真题与解析 分数:100 题数:37 测试时长:60分钟

win11不好用怎么退回win10_win11退回win10多种方法

最近有网友问我win11不好用怎么退回win10&#xff1f;win11感觉不好用&#xff0c;很多用户这时候想退回win10系统。电脑安装Win11系统觉得操作起来不太习惯&#xff0c;想要重新回到上一个系统&#xff0c;有什么办法实现?其实&#xff0c;微软也在Win11中准备了回退功能,让用…

「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现

自定义动画让开发者可以设计更加个性化和复杂的动画效果,适合表现独特的界面元素。鸿蒙提供了丰富的工具,支持通过自定义路径和时间控制来创建复杂的动画运动。本篇将带你学习如何通过自定义动画实现更多样化的效果。 关键词 自定义动画动画路径贝塞尔曲线动画控制一、Animat…

Linux 实时调度案例:系统启动时被限制带宽的实时进程

文章目录 1. 前言2. 今天的德芙&#xff0c;不那么丝滑3. 后记 1. 前言 限于作者能力水平&#xff0c;本文可能存在谬误&#xff0c;因此而给读者带来的损失&#xff0c;作者不做任何承诺。 2. 今天的德芙&#xff0c;不那么丝滑 最近的工作不是很丝滑&#xff0c;本以为三两…

【分立元件】贴片电阻过电压故障机理

在文章:【分立元件】贴片电阻器的故障现象和原理 中我们讲到电阻故障现象类型。其中包括了由电气过载导致的电阻体烧损。 在文章:

ubuntu-开机黑屏问题快速解决方法

开机黑屏一般是由于显卡驱动出现问题导致。 快速解决方法&#xff1a; 通过ubuntu高级选项->recovery模式->resume->按esc即可进入recovery模式&#xff0c;进去后重装显卡驱动&#xff0c;重启即可解决。附加问题&#xff1a;ubuntu的默认显示管理器是gdm3,如果重…

Java已死,大模型才是未来?

作者&#xff1a;不惑_ 引言 在数字技术的浪潮中&#xff0c;编程语言始终扮演着至关重要的角色。Java&#xff0c;自1995年诞生以来&#xff0c;便以其跨平台的特性和丰富的生态系统&#xff0c;成为了全球范围内开发者们最为青睐的编程语言之一 然而&#xff0c;随着技术的…

24小时跑2W+销售额,本地生活+数字人直播模式真好用!

本地生活AI数字人直播的模式已经火热了一段时间了&#xff0c;但依旧有商家还不清楚这个模式到底好不好用&#xff1f;这里我就给大家稍微讲解下这种模式驱动下&#xff0c;对于商家来说究竟会有哪些好处。 先给大家看看已经跑了20多小时的两个数字人直播间&#xff0c;可以看到…