基于uniapp官方的picker实现(也可以自定义select)。.

  1. 查询返回数据集之后先备份成backupData。
  2. 增加一个输入框,用来输入要模糊查询的内容。
  3. 增加一个“定位”按钮,用于把模糊内容查出来。
  4. 增加一个“恢复”按钮,用于还原搜索前的数据。
  5. 增加一个函数,支持传入目标数据的对象对应key,通过indexOf > -1的方式把所有符合条件的项都过滤出来,形成一个新的array,用于显示到当前页面。也可以通过传后台,让后台把模糊搜索的数据返回到前端的方式。
  6. 增加一个函数,直接把最新的array覆盖成备份数据backupData,用于还原搜素。

代码样例:

<template>
	<view>
		<view >这是个下拉</view> 
			<picker @change="bindBzChange" :value="bzIndex"   :range-key="'DEPARTNAME'"  :range="bzArray">
				<view class="uni-input">{{bzArray[bzIndex].DEPARTNAME || ''}}</view>
			</picker>
		<view>
			模糊搜索:<input placeholder="请输入搜索关键字" v-model="searchKey" />
		</view>
		<view style="margin-top: 10rpx; display: flex; flex-direction: row;">
			<button  size="default" type="mini" @tap="locate()">定位</button>
			<button  size="default" type="mini" @tap="restore()">还原</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 初始化一个默认空值,防止报错
				bzArray: [{DEPARTNAME:'',ORG_CODE:''}],
				// 当前选中的下标,触发change事件后需要跟着变
				bzIndex: 0,
				// 模糊搜索的内容
				searchKey: '',
				// 备份的下拉数据
				backupSet: []
			}
		},
		onLoad(option) {
			// 页面加载的时候读取下拉数据
			this.initSelect()
		},
		methods: {
			/**
			 * 支持传入搜索key
			 * @param {Object} skey
			 */
			locate(skey) {
				if (!skey) {
					skey = 'DEPARTNAME'
				}
				// 这是临时下拉数据
				let arrSet = []
				
				// js直接处理 二选一
				for (let item of this.bzArray) {
					if (item[skey].indexOf(this.searchKey) > -1) {
						arrSet.push(item);
					}
				}
				this.bzArray = arrSet
				
				// 后端处理 二选一
				let that = this
				uni.request({
					url:'http://ip:port/app/path?skey='+skey,
					success(res) {
						// ...
						that.bzArray = res.arrSet
					},
					fail(e) {
						// ...
					}
					
				})
			},
			restore() {
				// 使用备份数据还原
				this.bzArray = this.backupSet
			},
			initSelect() {
				let that = this
				let url = `请求数据的URL`
				uni.request({
					url: url,
					success:function(res){
						// 赋初值
						that.bzArray = res.data.obj;
						// 备份数据(备份数据只能在加载的时候赋值一次,否则数据就跑丢了)
						that.backupSet = that.bzArray;
					},
					fail: (err) => {
						console.info(`失败了。。。。。${JSON.stringify(err)}`);
						uni.showToast({
							title: "请求服务器失败!",
							icon:'none',
							duration:2000
						})
					}
				})
			},
			bindBzChange: function(e) {
				console.log('picker发送选择改变,携带值为', e.target.value)
				this.bzIndex = e.target.value;
				this.currentDepartId = this.bzArray[this.bzIndex].ORG_CODE;
			},
		}
	}
</script>

<style>

</style>

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐