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-dialog
      v-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-select
          v-model="selectContent"
          placeholder="比赛信息"
          style="width: 320px; margin-right: 20px; max-height: 1000px"
          filterable
          class="custom-select"
          popper-class="custom-popper"
        >
          <div class="select-options-container">
            <el-option
              v-for="item in contestNames"
              :key="item"
              :label="item"
              :value="item"
            >
              <div style="display: flex; justify-content: space-between">
                <span>{{ item }}</span>
                <el-button
                  size="small"
                  type="danger"
                  plain
                  @click.stop="confirmDelete(item)"
                  >X</el-button
                >
              </div>
            </el-option>
            <el-option disabled label="暂无更多数据" />
          </div>
          <div class="select-footer">
            <el-button
              v-if="!isAddingContent"
              size="small"
              text
              bg
              @click="onAddContent"
            >
              增加比赛
            </el-button>
            <div v-else>
              <el-input
                v-model="addContentName"
                style="width: 100%; margin-bottom: 10px"
                placeholder="请输入新比赛名称"
                size="small"
              />
              <el-button
                type="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-select
        v-model="selectAward"
        placeholder="比赛信息"
        style="width: 320px"
        filterable
        popper-class="custom-popper"
        class="custom-select"
        :disabled="!selectContent"
      >
        <div class="select-options-container">
          <el-option
            v-for="item in awardsNames"
            :key="item"
            :label="nameScore(item)"
            :value="item"
          >
            <div style="display: flex; justify-content: space-between">
              <span>{{ item }}</span>
              <el-button
                size="small"
                type="danger"
                plain
                @click.stop="confirmDeleteAward(item)"
                >X</el-button
              >
            </div>
          </el-option>
          <el-option disabled label="暂无更多数据" />
        </div>
        <div class="select-footer">
          <el-button
            v-if="!isAddingAward"
            text
            bg
            size="small"
            @click="onAddAward"
          >
            增加奖项
          </el-button>
          <template v-else>
            <span>奖项：</span>
            <el-input
              v-model="addAwardName"
              style="width: 35%; margin-bottom: 5px; margin-right: 10px"
              placeholder="请输入奖项字符"
              size="small"
            />
            <span>分数：</span>
            <el-input
              v-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>