vue 搜索列表，搜索结果高亮，且页面滚动到指定位置

最新推荐文章于 2024-07-13 00:19:52 发布

哼哼可帅

最新推荐文章于 2024-07-13 00:19:52 发布

阅读量455

点赞数 1

分类专栏： vue 文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/weixin_40403102/article/details/115444744

版权

本文展示了如何在Vue.js项目中结合Element UI实现搜索功能，列表搜索结果高亮显示，并能自动滚动到指定搜索结果的位置。通过分析`template`部分的代码结构和`js`实现逻辑，读者可以理解并应用到自己的项目中。

摘要由CSDN通过智能技术生成

效果图如下：
在这里插入图片描述

template部分代码：

在这里插入图片描述

//搜索框
<el-input  placeholder="请输入单位名称"
   prefix-icon="el-icon-search"
   @keyup.enter.native="searchCompany"
   v-model="search_key">
</el-input>
//列表
 <div class="all_company" id="all_company" ref="all_company">
	<div class="industry_item" :id="'anchor-'+index" v-for="(item,index) in companyArr" :key="index">
	    <div @click="checkAllchange(index)">
	        <el-checkbox 
	        v-model="item.checkAll"
	         :indeterminate="itemIndet