element-ui select框改造加入添加和删除功能

最新推荐文章于 2023-12-11 11:33:35 发布

混入公司的小袁同学

最新推荐文章于 2023-12-11 11:33:35 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript 前端框架

本文链接：https://blog.csdn.net/2301_77079844/article/details/131571678

文章展示了如何在Vue.js应用中使用el-select组件，包括绑定v-model，设置placeholder，实现可清除选项，以及通过el-option动态渲染数据。同时，提到了一个问题，即当滚动到select框底部时，最后一个option的高度会增加，并表达了对解决方案的期待。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大概要做成这样废话不说直接贴代码

                <el-select v-model="queryParams.supplier" placeholder="供应商" clearable>

                  <el-option v-for="(item, index) in gongyingshang" :key="item.value" :label="item.label"
                    :value="item.value">
                    {{ item.label }}
                    <!-- 将 label 改为插槽形式 -->
                    <template>
                      <el-popconfirm confirmButtonText="好的" cancelButtonText="取消" icon="el-icon-info" iconColor="red"
                        title="确定删除该供应商吗？" @confirm="deleteOptiongongyingshang(index)">
                        <span class="delete-option" slot="reference">删除</span>
                      </el-popconfirm>
                    </template>
                  </el-option>
                  <template>
                    <div class="add" @click="add()">
                      <span style="font-size: 16px">+</span> 新增
                    </div>
                  </template>
                </el-select>

还有css 把新增框固定在下

.add {
  width: 100%;
  height: 30px;
  color: #3396fa;
  text-align: center;
  border-top: 1px solid #ccc;
  font-size: 14px;
  line-height: 30px;
  position: sticky;
  bottom: 0px;
  background-color: #fff;
  opacity: 1;
}

有个小问题就是 select框拉到最下的时候最后一个option会增大高度这边懒得写有朋友优化了记得告诉我贴下代码谢谢