vue~el-autocomplete实现组件化
el-autocomplete核心参数
可以实现异步的数据拉取,从异步返回的数据中,选择需要的结果,并回显到文本框中。
fetch-suggestions
回调列表,异步的方式获取数据列表,显示在列表框中
@select
当选中某一项时,会触发这个方法,将数据获取到,这时,我们可以将数据回显,或者赋值给父页面上的元素,如果希望赋值父页面上v-model绑定的元素,可以通过v-model原理中说的,绑定input事件,将当前值进行传递即可。
实例代码
子组件代码
<template>
<div>
<el-autocomplete
:fetch-suggestions="fetchSuggestions"
v-model="dataValue"
@select="handleSelect"
>
<template slot-scope="{ item }">{{ item.label }}</template>
</el-autocomplete>
</div>
</template>
<script>
export default {
name: 'SearchLawfirmName',
//allInfos是父组件传来的值,如果allInfos不是父组件传来的就不用这样写
props: ["allInfos"],
data() {
return {dataValue: null}
},
methods: {
fetchSuggestions(queryString, cb) {
let results = this.allInfos;
results = queryString
? results.filter(this.createFilter(queryString))
: results;
cb(results);
},
createFilter(queryString) {
return (item) => {
return item.value.toUpperCase().match(queryString.toUpperCase());
};
},
handleSelect(item) {
this.dataValue = item.label; // 回调在文框中显示的值
this.$emit('input', item.value);// 绑定到父组件的值
},
}
};
</script>
父页面上引用它
<SearchLawfirmName v-model="searchLawfirmName" :allInfos="allData"></SearchLawfirmName>
import SearchLawfirmName from "@/components/SearchLawfirmName/index.vue";
export default {
data() {
return {
allData:[
{ value: 'result1', label: 'Result 1' },
{ value: 'result2', label: 'Result 2' },
{ value: 'result3', label: 'Result 3' }
],
searchLawfirmName:null
}
}
}
上面代码中,我们通过import引入了自定义组件,再将组件选中的当前值赋给页面属性searchLawfirmName,我们将异步的数据列表allData
通过allInfos参数进行传递。
合集:
前端技术
分类:
前端技术 / vue&react
, 前端技术
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2019-08-29 jvm虚拟机栈的作用
2011-08-29 做一个通用的XML序列化,支持所有类型