Vue element 下拉框可输入可选择

最新推荐文章于 2023-07-28 16:20:04 发布

海蓝树

最新推荐文章于 2023-07-28 16:20:04 发布

阅读量1.6k

点赞数

分类专栏：ｖｕｅ文章标签： vue.js javascript 前端

原文链接：https://blog.youkuaiyun.com/sunshineTing2/article/details/108978675?utm_medium=distribute.pc_feed_404.none-task-blog-2~default~BlogCommendFromBaidu~Rate-4.control404&depth_1-utm_source=distribute.pc_feed_404.none-task-blog-2~default~BlogCommendFromBaidu~Rate-4.

版权

ｖｕｅ专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何在VueElement UI的下拉框中实现既能选择已有选项又能允许用户自定义输入，并在输入时自动添加'（其他）'后缀。作者提供了详细的代码示例和关键方法，包括`selectBlur`、`selectClear`和`selectChange`，以确保组件状态的实时更新。

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

引用地址：Vue element 下拉框可输入可选择(无bug)_sunshineTing2的博客-优快云博客_vue可输入的下拉框

背景: 需要一个可填可选的下拉框
当用户自定义输入时,自动添加“(其他)”后缀

效果如下:

<el-select
           v-model="value"
placeholder="请选择"
clearable
filterable
@blur="selectBlur"
@clear="selectClear"
@change="selectChange"
>
<el-option
v-for="(item,index) in options"
:key="index"
:label="item.label"
:value="item.value" />
</el-select>

data() {
return {
       value: '',
       options: [
           {
       value: '无保留意见',
       label: '无保留意见'
       }, {
       value: '保留意见',
       label: '保留意见'
       }
       ],
}
}
thods: {
selectBlur(e) {
// 意见类型
if (e.target.value !== '') {
this.value = e.target.value + '(其他)';
this.$forceUpdate() // 强制更新
}
},
selectClear() {
this.value = ''
this.$forceUpdate()
},
selectChange(val) {
this.value = val
this.$forceUpdate()
},
}

注: 使用Vue开发时，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值；
赋值完以后，执行下面这个方法强制刷新数据

this.$forceUpdate()
————————————————
版权声明：本文为优快云博主「zlting~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/sunshineTing2/article/details/108978675