uniapp实现快捷模糊查询

---

前言

快捷模糊查询，根据输入员工姓名进行模糊查询
利用了uni组件完成
实现要求

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、思路？

思路：filterList() {
var arr = [] //定义一个空数组
this.zhiweilist.forEach((item) => arr.push(item)) //在zhiweilist查找数据放入空数组
if (this.filterText) { //如果有这个数据
arr = this.zhiweilist.filter(item => item.name.includes(this.filterText))
//则在zhiweilist里过滤掉filterText
}
return arr

二、使用步骤

1.引入库

代码如下（示例）：

<template>
	<view class="pages">


		<!-- 代码 start -->



		<view class="emg-1">
			<uni-search-bar v-model="filterText" placeholder="请输入员工姓名" bgColor="#EEEEEE" confirm-type="search"
				@confirm="searchMe" />

		</view>
		<view class="emg-2" @click="goAddemployee" data-tralerId="tralerList.id">+添加员工</view>
		<view class="emg-3" v-for="(xxzx,index) in xxzx" :key="index">
			<uni-list-item title="待审核员工" link @tap="gonoshenhe">
				<template v-slot:footer>
					<uni-badge class="uni-badge-left-margin" :text="xxzx.number" />
				</template>
			</uni-list-item>
		</view>

		<view class="invitation-zhiwei-ul" v-for="(item,index) in filterList" :key="index" @click="goModifyyg()">
			<uni-list-item :thumb="item.tx" thumb-size="base">
				<template v-slot:body>
					<view class="slot-box">
						<text class="slot-text">
							{{item.name}}

						</text>
						<uni-tag :inverted="true" :text="item.gly" class="emg-5" />
					</view>
				</template>
			</uni-list-item>

		</view>

		<!-- 代码  end -->

	</view>
</template>





<script>
	import {

		zhiweilist,
		xxzx
	}
	from '@/src/Employeegl.js';
	export default {
		data() {
			return {

				zhiweilist,
				xxzx,
				filterText: '',

			}
		},
		onLoad() {},
		computed: {
			filterList() {
				var arr = [] //定义一个空数组
				this.zhiweilist.forEach((item) => arr.push(item)) //在zhiweilist查找数据放入空数组
				if (this.filterText) { //如果有这个数据
					arr = this.zhiweilist.filter(item => item.name.includes(this.filterText))
					//则在zhiweilist里过滤掉filterText
				}
				return arr
			}
		},
		methods: {
			goModifyyg() {
				// console.log('kcodeList--->', this.kcodeList)
				uni.navigateTo({
					url: '/pages/Index/Employeegl/Modifyyg/Modifyyg'
				});
			},
			goAddemployee() {
				// console.log('kcodeList--->', this.kcodeList)
				uni.navigateTo({
					url: '/pages/Index/Employeegl/noshenhe/Addemployee/Addemployee'

				});
			},
			gonoshenhe() {
				// console.log('kcodeList--->', this.kcodeList)
				uni.navigateTo({
					url: '/pages/Index/Employeegl/noshenhe/noshenhe'
				});
			},

		}
	}
</script>




<style>
	.emg-2 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30upx;
		color: #52baff;
	}

	.emg-3 {
		margin-top: 50upx;
	}

	.emg-5 {
		margin-left: 40upx;
	}

	.slot-text {
		display: inline-block;
	}
</style>

2.mock数据

代码如下（示例）：

export const zhiweilist = [
	
	{
			id: 0,name: '刘*元',
			tx:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
			gly:'超级管理员'
		},
		{
			id: 1,name: '刘*元',
			tx:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
			gly:'超级管理员'
		},
		{
			id: 2,name: '张三',
			tx:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
			gly:'超级管理员'
		},
		{
			id: 3,name: '李四',
			tx:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
			gly:'超级管理员'
		},
		{
			id: 4,name: '王五',
			tx:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
			gly:'超级管理员'
		}
	
	
]

export const xxzx = [
	
	{
	number:'20'
		},
	
	
]

---

总结