文章展示了如何在Vue.js应用中使用el-select组件，包括绑定v-model，设置placeholder，实现可清除选项，以及通过el-option动态渲染数据。同时，提到了一个问题，即当滚动到select框底部时，最后一个option的高度会增加，并表达了对解决方案的期待。
摘要由CSDN通过智能技术生成
<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> 新增
</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会增大高度 这边懒得写 有朋友优化了记得告诉我贴下代码谢谢
<div style="margin-bottom: 8px">选择区域</div>
<el-button v-if="!buildings.length" type="link" @click="handleAdd">
</el-button>
<el-fo..
<el-select v-model="template" @change="templateChange">
<el-option v-for="item in templateList" :key="item.id" :label="item.name" :value="item.id">
<span>{{item.name}
