文章展示了如何在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}