###
Element-UI Select
下拉框使用教程
Element-UI 的 `el
-select` 是一个功能强大的下拉选择组件，支持多种配置选项和事件处理机制。以下是基于提供的引用内容以及扩展的知识点来详细介绍如何使用该组件。
#### 1. 修改
下拉框位置
为了调整 `el
-select` 组件的
下拉框显示位置，可以通过设置 `teleported="false"` 属性实现[^1]。此属性的作用是让弹出层不再被挂载至 body 上，而是直接作为当前 DOM 节点的一部分渲染。这样可以更方便地通过 CSS 控制其定位：
```html
<el
-select v
-model="value" teleported="false">
<el
-option
v
-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el
-option>
</el
-select>
```
随后可通过 `.el
-popper` 类名进一步微调样式。例如，在 SCSS 文件中嵌套定义如下规则：
```scss
.el
-select {
.el
-popper {
top: calc(100% + 8px); /* 自定义偏移量 */
}
}
```
#### 2. 获取
选中项的其他值
当需要捕获用户所选对象中的额外字段（而非仅限于 value 或 label），可借助 `@change` 方法监听变化并返回完整的数据对象[^2]。下面是一个典型的应用场景实例：
```html
<div>
<span class="span
-box">车牌号</span>
<el
-select
class="el
-input box"
v
-model="subData.plate"
remote
filterable
placeholder="请选择"
:remote
-method="remoteCar"
@change="getAddPlateObj">
<el
-option
v
-for="item in carslist"
:key="item.vid"
:label="item.plate"
:value="item.plate">
</el
-option>
</el
-select>
</div>
<script>
export default {
data() {
return {
subData: { plate: '' },
carslist: [
{ vid: '123', plate: '京A12345
-绿', platecolor: '绿', plateno: '京A12345' },
{ vid: '456', plate: '沪B98765
-黄', platecolor: '黄', plateno: '沪B98765' }
]
};
},
methods: {
getAddPlateObj(value) {
const selected = this.carslist.find(item => item.plate === value);
console.log('Selected Object:', selected);
},
remoteCar(query) {
// 动态加载逻辑...
}
}
};
</script>
```
上述代码片段展示了如何利用 `@change` 处理函数提取更多关联信息。
#### 3. 添加自定义按钮到下拉列表
有时可能希望在下拉菜单底部加入操作按钮等功能性控件。这可以通过创建一个不可用 (`disabled`) 的虚拟选项，并重写对应样式的手段达成目标[^3]：
```html
<el
-select v
-model="customValue">
<el
-option
v
-for="(item, index) in customOptions"
:key="index"
:label="item.label"
:value="item.value">
</el
-option>
<!
-- 定义占位符
-->
<el
-option disabled value="" style="height:auto;">
<button type="button" class="add
-btn">新增项目</button>
</el
-option>
</el
-select>
<style scoped>
.add
-btn {
width: 100%;
border: none;
background
-color: #f0f0f0;
color: #409eff;
cursor: pointer;
}
.add
-btn:hover {
background
-color: #e0e0e0;
}
</style>
```
以上方式允许开发者灵活定制交互行为的同时保持界面一致性。
---
###
本文解决了一个常见的前端开发问题，即下拉框在编辑值后回显，但无法再次选中的问题。通过使用Element UI组件库的el-select和el-option，并结合Vue.js的$forceUpdate()方法，成功解决了这一难题。
扫一扫
402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
