vue select下拉选择可搜索
<a-form-item label="一级服务类目名称"><a-select@focus="handleFocus"@change="selectParentOne"showSearchv-decorator="...
·
当下拉数据过多时我们需要想搜索那样的功能,
<a-form-item label="一级服务类目名称">
<a-select
@focus="handleFocus"
@change="selectParentOne"
showSearch
v-decorator="[
'levelOne',
{ rules: [{ required: true, message: '一级服务类目名称不能为空' }] },
]"
allowClear
:filterOption="false"
@search="handleSearch"
placeholder="请选择一级服务类目"
>
<a-select-option
v-for="item in selectedItems"
:key="item.id+''"
>
{{item.title}}
</a-select-option>
</a-select>
</a-form-item>
export default {
data () {
return {
selectedItems: [], // 数据存放在数组里
conditions: {
code: '',
title: '',
intro: '',
level: 2,
isPosition: 1
}, // 新建
}
},
methods: {
/**
* 搜索一级类目
*/
handleSearch (value) {
this.projectItemsData(value)
},
/**
* 获取焦点时
*/
handleFocus () {
this.projectItemsData()
},
/**
* 选择一级类目
*/
selectParentOne (value, option) {
this.conditions.parentId = value
this.conditions.type = this.selectedItems.filter(item => item.id == value)[0].title
},
/**
* 获取一级列表数据
*/
projectItemsData (searWard) {
const con = {}
con.level = 1
// 有分页时
con.page = JSON.stringify({ size: 100, current: 1 })
// 搜索时的关键字
if (searWard) con.type = searWard
// 获取接口数据存放在数组里
projectItems(con).then(res => {
this.selectedItems = res.result.datas.records
})
},
}
更多推荐
已为社区贡献3条内容
所有评论(0)