Vue 模糊查询（按字段）

你的名字 2021-09-07 09:44 641阅读 0赞

根据人家的代码，对应改成自己的需要的功能  
原参考地址：https://blog.csdn.net/zuorishu/article/details/86630097

<template>
    	<view class="content">
    		<view class="search">
    			
    			<u-search placeholder="搜索" shape="square" :show-action="true" bg-color="#fff" v-model="search"></u-search>
    		</view>
    
    		<view>
    			<view class="grouping" v-for="(item,index) in items">
    				<image src="../../../../static/img/home/grouping-icon.png" mode=""></image>
    				<view class="grouping-nav-tit">
    					<view class="grouping-nav">{
       {item.station_name}}</view>
    					<view class="grouping-nav" style="font-size: 16px;">{
       {item.station_address}}</view>
    				</view>
    				<view class="grouping-nav-btn">
    					<view class="button">照片</view>
    					<view class="button">位置</view>
    				</view>
    			</view>
    		</view>
    	</view>
    </template>

<script>
    	export default { 
    		data() { 
    			return { 
    				search: '',
    				groupinglist: []
    			}
    		},
    		onLoad() { 
    			this.getStationListByRelate()
    		},
    		computed: { 
    			getStationListByRelate() { 
    				this.$http.get('JiekouMing', { 
    					canshu: 35
    				}).then(res => { 
    					this.groupinglist = res.data.data;
    					console.log(this.groupinglist)
    				})
    			},
    
    			items: function() { 
    				var _search = this.search;
    				if (_search) { 
    					//不区分大小写处理
    					var reg = new RegExp(_search,'name')
    					//es6 filter过滤匹配，有则返回当前，无则返回所有
    					return this.groupinglist.filter(function(e) { 
    						//匹配某个字段
    						 return e.station_name.match(reg);
    					})
    				};
    				console.log(this.groupinglist)
    				return this.groupinglist;
    			}
    		}
    	}
    </script>

<style> page { 
    		background-color: #f5f5f5;
    	}
    
    	.content { 
    		width: 90%;
    		margin-left: 5%;
    	}
    
    	.search { 
    		width: 100%;
    		height: 50px;
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		padding: 5%;
    	}
    
    	.grouping { 
    		margin-top: 10px;
    		display: flex;
    		justify-content: flex-start;
    		align-items: center;
    		height: 80px;
    		background-color: #fff;
    		box-shadow: 2px 2px 1px #ccc;
    		border-radius: 2px;
    	}
    
    	.grouping image { 
    		margin-left: 10px;
    		width: 50px;
    		height: 50px;
    	}
    
    	.grouping-nav-tit { 
    		width: 65%;
    	}
    
    	.grouping-nav { 
    		width: 100%;
    		padding-left: 10px;
    		font-size: 18px;
    		line-height: 25px;
    		overflow: hidden;
    		/*超出部分隐藏*/
    		text-overflow: ellipsis;
    		/* 超出部分显示省略号 */
    		white-space: nowrap;
    		/*规定段落中的文本不进行换行 */
    	}
    
    	.grouping-nav-btn { 
    		display: flex;
    		justify-content: center;
    		flex-wrap: wrap;
    		width: 20%;
    		/* height: 60px; */
    	}
    
    	.button { 
    		margin-top: 10px;
    		width: 50px;
    		height: 23px;
    		border-radius: 5px;
    		text-align: center;
    		line-height: 23px;
    		background-color: #2E95FF;
    		color: #FFFFFF;
    	}
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，641人围观）

还没有评论，来说两句吧...

相关阅读

相关前端页面多字段模糊查询

前端页面多字段模糊查询本文主要参考了大佬们的内容，整合记录一下具体内容。 1 实现代码 arr是前端原有的列表数组（后台返回来的数据） var arr

た入场券/ 2024年04月01日 14:53/ 0 赞/ 74 阅读

相关 mysql查询字段按逗号隔开

sql字段里有逗号隔开的数据,怎么取值 sql字段有逗号隔开，数据取值的方法。如下参考： 1.查询数据库表的所有字段，直接使用select语句，如下图。 2.查询

绝地灬酷狼/ 2023年09月25日 09:24/ 0 赞/ 75 阅读

相关【Oracle】模糊查询&按匹配度排序

select t.zh_name from psn_ins t where t.ins_id = 857 and t.zh_name like '%' || '肖锐'

桃扇骨/ 2023年06月23日 06:52/ 0 赞/ 7 阅读

相关 oracle查询按字段去重复,oracle 根据字段查询重复数据

MySQL数据库根据一个或多个字段查询重复数据系统在开发测试过程中出现bug,比如并发操作没有处理好,数据库中往往会插入重复数据,这些脏数据经常会导致各种问题.bug可以修

逃离我推掉我的手/ 2023年01月18日 15:30/ 0 赞/ 435 阅读

相关模糊查询

模糊查询：在条件不完全的情况下进行查询例如:查找姓张，但是忘记名字的人语法要素： 1.用LIKE代替= 2.使用通配符

Dear 丶/ 2022年05月18日 03:11/ 0 赞/ 359 阅读

相关 mysql 多字段关键词模糊查询

![Center][] 使用上表举例： 1，输入单个关键字“001”可查出四条数据，可实现的sql语句是： SELECT FROM tb WHE

阳光穿透心脏的1/2处/ 2022年05月10日 03:33/ 0 赞/ 315 阅读

相关 sql多字段模糊查询

SELECT FPT.PRODUCT\_IMAGE\_PATH AS PRODUCT\_IMAGE\_PATH, FIM.ITEM\_NAME AS ITEM\_NAME,

悠悠/ 2022年04月14日 03:55/ 0 赞/ 497 阅读

相关 mysql单表多字段模糊查询

我们在使用mysql的时候，有时候需要在一张表中模糊查询多个字段，可能存在于多个字段中的任意一个或者多个，我们可以使用 CONCAT 参数来进行查询，CONCA( ) 中添加字

偏执的太偏执、/ 2022年04月12日 03:37/ 0 赞/ 350 阅读

相关 MySQL 模糊查询某字段用逗号隔开

1. 查找pnum字段中包含3或者9的记录 SELECT \ FROM test WHERE find\_in\_set('3',pnum) OR find\_in\_se

绝地灬酷狼/ 2021年09月16日 01:56/ 0 赞/ 656 阅读

相关 Vue 模糊查询（按字段）

根据人家的代码，对应改成自己的需要的功能原参考地址：https://blog.csdn.net/zuorishu/article/details/86630097

你的名字/ 2021年09月07日 09:44/ 0 赞/ 642 阅读