element-ui 下拉框无法选中

本文解决了一个常见的前端开发问题,即下拉框在编辑值后回显,但无法再次选中的问题。通过使用Element UI组件库的el-select和el-option,并结合Vue.js的$forceUpdate()方法,成功解决了这一难题。

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

问题:下拉框在编辑值回显后,无法再选中

解决:

<el-select v-model="value" placeholder="请选择" @change="change">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

change(){    

this.$forceUpdate()

}

转载于:https://my.oschina.net/u/2262481/blog/3089672

### 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> ``` 以上方式允许开发者灵活定制交互行为的同时保持界面一致性。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值