vue+elementUI中使用 el-autocomplete 实现远程搜索的下拉框需要注意的问题
需要注意的地方:1、后台获取的数组中每一个对象必须要有一个value字段, 因为autocomplete只识别value字段并在下拉列中显示。2、为什么选择input组件群下的el-autocomplete 而不是select下的远程搜索?因为点击选中时可获取到选中行的附带信息即一个对象, 而select组件下的远程搜索只能选中点击的字符串。html如下:<el-autocomplete
·
需要注意的地方:
1、后台获取的数组中每一个对象必须要有一个value字段, 因为autocomplete只识别value字段并在下拉列中显示。
2、为什么选择input组件群下的el-autocomplete 而不是select下的远程搜索?
因为点击选中时可获取到选中行的附带信息即一个对象, 而select组件下的远程搜索只能选中点击的字符串。
html如下:
<el-autocomplete
name="selCar"
v-model="selCar"
@select="checkCar"
placeholder="查询车辆:"
:trigger-on-focus="false">
</el-autocomplete>
js如下:
checkCar(item) { //选中信息获取后台数据,在这里item为选中字段所在的对象
this.carId = parseInt(item.id);
this.companyId = parseInt(item.companyId);
this.$http.get("/vehicle/detail/" + this.carId,
).then((response) => {
this.checkCarInfo = response.data.data;
if (!this.checkCarInfo.qualification) {
this.checkCarInfo.qualification = this.qualificationDefault();
}
this.cheCarBox = true;
});
this.carCheckCompany() //根据车查询所属公司详情
},
queryCar(str, cb) {
this.$http.get("/vehicle/suggestion/need_owner", //车辆建议列表
{
params: {
vehicleNo: str,
companyId: this.companyId,
}
}
).then((response) => {
for (let i of response.data.data) {
i.value = i.vehicleNo; //ps:必须为每个对象增加value字段!!因为autocomplete只识别value字段并在下拉列中显示
}
let sugList = response.data.data;//数组
if (sugList.length === 0) {
sugList = [{value: '暂无数据'}]
}
cb(sugList);// 调用 callback 返回建议列表的数据
})
}
更多推荐
已为社区贡献2条内容
所有评论(0)