Vue、element 远程搜索el-autocomplete使用具体操作(完整步骤)
此远程搜索组件默认循环的值是数组中对象的value属性,而项目需求是address属性,有3种做法。
1.修改数组属性,这里就不做阐述,是对数组操作。
修改数组属性,这里就不做阐述,是对数组操作,和组件没关系。
mounted() {
var list = []
this.restaurants = this.loadAll().map(item => {
item.value = item.address //赋予对象value属性
return item
})
}
2.修改组件默认属性,默认value属性我们修改成address属性
注意:*远程搜索接受的是一个数组*
<el-form-item label="授权店铺">
<el-autocomplete
v-model.trim="state" //.trim是删除首尾空格
:clearable="true"
value-key="address" //修改element默认行为,绑定属性值为address
:fetch-suggestions="querySearchAsync"
placeholder="请输入授权店铺"
@select="handleSelect"
>
</el-autocomplete>
- 使用插槽slot-scope
<el-form-item label="授权店铺">
<el-autocomplete
v-model.trim="shopName"
:clearable="true"
:fetch-suggestions="querySearchAsync"
placeholder="请输入授权店铺"
@select="handleSelect"
>
<template slot-scope="{ item }"> //item为数组元素,Object
<div>{{ item.address }}</div> //下拉列表显示的值已更改为address值
</template>
</el-autocomplete>