支持下拉选择并编辑选择的内容以及直接输入新内容
MarkLin 2021-07-29 Vue
支持下拉选择并编辑选择的内容以及直接输入新内容
最进项目遇到一个需求： 有个字段需要根据对应字典实现下拉选择，并且选择后可以编辑，或者不选则直接输入内容，由于目前主流组件中没有可直接实现该功能，基本实现的效果是可以选择但不能编辑，可以多选等
大致效果：
目前解决方案是采用支持远程搜索的输入框配合实现需求，使用的是Element UI 的input输入框-远程搜索组件，如下：
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
@select="handleSelect"
></el-autocomplete>
1
2
3
4
5
6
2
3
4
5
6
具体实现：
value-key 是字典中下拉选择的value值字段名
html
<el-autocomplete
v-else
v-model="item.detectResult"
:fetch-suggestions="querySearchAsync"
value-key="value"
style="width:100%;"
@focus="selectFocus(item)"
@blur="resultChang(item)"
/>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
js
data() {
return {
state: '',
timeout: null,
cid: '',
reasonsOptions：[] // 所有字典数据
}
}
methods: {
// 获取当前点击的id
selectFocus(row) {
this.cid = row.cid
},
// 远程搜索 传入搜索内容及返回结果
querySearchAsync(queryString, cb) {
// 获取该下拉选择器的所有数据
const list = []
this.reasonsOptions.forEach(i => {
if (this.cid == i.cid) {
list.push(i)
}
})
var restaurants = list
var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
clearTimeout(this.timeout)
this.timeout = setTimeout(() => {
cb(results)
}, 500 * Math.random())
},
/** 过滤 */
createStateFilter(queryString) {
return (state) => {
return (state.value.indexOf(queryString) === 0)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
说明：
由于字典数据字段reasonsOptions 适用不同内容的字典，需要根据cid字段来获取当前需要的下拉数据，所以此处进行了循环获取，如果只是单一下拉框用的数据，则直接赋值给下面的restaurants 字段即可，results 这里是获取需要返回显示的下拉选项，有输入查询的值则调用createStateFilter() 进行查找过滤字典中与输入的值一致的结果，并返回，如果没有输入查找内容则直接显示所有下拉选项。