vue input框带搜索功能
vue input框带收缩功能Input输入框<template>名称:<el-autocompletev-model="searchname":fetch-suggestions="querySearchAsync"placeholder="请输...
·
vue input框带搜索功能
Input输入框
<template>
名称:
<el-autocomplete
v-model="searchname"
:fetch-suggestions="querySearchAsync"
placeholder="请输入名称:"
clearable //可清除
></el-autocomplete>
</template>
<script>
export default {
name: "Input",
mounted: function() {
this.loadAll();
},
data() {
return {
//input远程搜索
searchname: "",
restaurants: [],
timeout: null,
uploading: false,
};
},
methods: {
//名称输入搜索
loadAll() {
this.$axios.get( url + "/Platform/getPlatform").then(res => {
if (res.data.code == 200) {
var data2 = [];
res.data.data.map((value, index, arry) => {
data2.push({
id: value.id,
value: value.platformName, //重新修改后台返回来的Key名
});
});
this.restaurants = data2;
} else {
this.$message.info("暂无数据");
}
});
},
querySearchAsync(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString
? restaurants.filter(this.createStateFilter(queryString))
: restaurants;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 1000 * Math.random());
},
createStateFilter(queryString) {
return state => {
return (
state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
);
};
},
}
}
};
</script>
Select选择器
<el-form-item label="名称">
<el-select
v-model="addForm.platformId"
filterable //可输入搜索
clearable //可清除
multiple //多选
placeholder="请选择名称"
class="ptselect"
@change="changehand()"
>
<el-option
v-for="item in pingtailist"
:key="item.id"
:label="item.platformName"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
更多推荐
已为社区贡献8条内容
所有评论(0)