需求
搜索框是我们在开发各类项目中出现率很高的一个"组件",在element-plus中名为"自动补全输入框",即我们可以根据输入的内容去检索列表或者表格或者其他本页面出现的元素,那我们应该如何去实现这个行为呢?
思路
整体过程是这样的:
实现过程
template部分 <el-autocomplete v-model="state1" :fetch-suggestions="querySearch" class="inline-input w-50" placeholder="搜索" @select="handleSelect" @change='change'> </el-autocomplete> srcipt部分 import { onMounted,ref } from 'vue' interface RestaurantItem { value: string link: string } const state1 = ref('') const restaurants = ref<RestaurantItem[]>([]) const querySearch = (queryString: string,cb: any) => { const results = queryString ? restaurants.value.filter(createFilter(queryString)) : restaurants.value // call callback function to return suggestions cb(results) } const createFilter = (queryString: string) => { return (restaurant: RestaurantItem) => { return ( restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ) } } const loadAll = () => { return [ { value: 'vue',link: 'https://github.com/vuejs/vue' },{ value: 'element',link: 'https://github.com/ElemeFE/element' },{ value: 'cooking',link: 'https://github.com/ElemeFE/cooking' },{ value: 'mint-ui',link: 'https://github.com/ElemeFE/mint-ui' },{ value: 'vuex',link: 'https://github.com/vuejs/vuex' },{ value: 'vue-router',link: 'https://github.com/vuejs/vue-router' },{ value: 'babel',link: 'https://github.com/babel/babel' },] } const handleSelect = (item: RestaurantItem) => { console.log(item) } onMounted(() => { restaurants.value = loadAll() })
需要解释的是组件中的这个事件
select 点击选中建议项时触发
handleSelect 则是手动触发选中建议事件
这一项是"点击输入框内容"
②根据选中的内容,在对应的表格中查找
const handleSelect = (item: RestaurantItem) => { console.log(item) }
在这个函数中,我们可以log item,可以发现item就是loadAll中的内容,我们可以给loadAll里的内容都绑定一个id值,例如
{ id:1,value: 'vue',
然后我们在对应的表格的内容也添加一个id,这里就不举例了,至此,我们可以判断,如果loadAll里的id==表格里某一项的id,那就是我们需要的对象
for(let i=0;i<表格长度;i++){ let id = 表格[i].id if (item.id == 表格[i].id) { document.getElementById(id).scrollIntoView(); }
③跳转
document.getElementById(id).scrollIntoView();
整体的实现思路是:拿到搜索框选中的内容的id,与此同时给表格中的每一项内容都添加id,然后在select事件中,利用for循环去寻找搜索框id==表格内容id的对象,最后是利用scrollIntoView()方法进行跳转
补充内容
需要补充的是,如何获取到对应的元素?一是v-for循环,给每个对象添加id,格式是v-for = value in 表格 :id="value.id"
二是通过绑定ref函数获取
总结
原文地址:https://blog.csdn.net/weixin_44001222/article/details/127761068
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。