vue+elementUIでel-autocompleteを使用してリモート検索を実現するドロップダウンボックスで注意すべき問題
2952 ワード
注意すべき点:
1、バックグラウンドで取得した配列の各オブジェクトには、autocompleteがvalueフィールドのみを認識し、ドロップダウン列に表示するため、valueフィールドが必要です.2、なぜselectのリモート検索ではなくinputコンポーネント群の下のel-autocompleteを選択したのですか?選択をクリックすると、選択した行の付属情報であるオブジェクトが取得されるため、selectコンポーネントの下のリモート検索ではクリックした文字列しか選択できません.
htmlは次のとおりです.
jsは以下の通りです.
1、バックグラウンドで取得した配列の各オブジェクトには、autocompleteがvalueフィールドのみを認識し、ドロップダウン列に表示するため、valueフィールドが必要です.2、なぜselectのリモート検索ではなくinputコンポーネント群の下のel-autocompleteを選択したのですか?選択をクリックすると、選択した行の付属情報であるオブジェクトが取得されるため、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
})
}