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>