vue表格读取数据，搜索表格、清空搜索条件

最新推荐文章于 2024-06-14 09:39:09 发布
最新推荐文章于 2024-06-14 09:39:09 发布
阅读量6.9k 收藏 8
点赞数 2
文章标签： vue读取表格数据 axios请求接口 搜索表格 清空搜索条件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jxg1473819657/article/details/84231306
版权

用axios请求接口数据,用vue的形式显示在表格中，搜索表格中的数据，点按钮清空搜索条件

第一：html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>宿舍卫生</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/style.css">
	</head>

	<body>
		<div id="box">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">宿舍卫生列表</h1>
			</header>
			<div class="mui-content">
				<div class="white-bg mb10">
					<div class="search" >
						<form class="search-group">
						    <div class="search-input-row">
						        <label>宿舍楼：</label>
						        <select name="" v-model="searchCriteria.buildId">
						        	<option v-for="build in buildDrop" :value="build.id">{{build.buildName}}</option>
						        </select>
						    </div>
						    <div class="search-input-row">
						        <label>宿舍号：</label>
						        <input v-model="searchCriteria.roomCode" placeholder="宿舍号">
						    </div>
						    <div class="search-input-row">
						        <label>状态：</label>
						        <select name="" v-model="searchCriteria.situation">
						        	<option value="1">优</option>
					                <option value="2">良</option>
					                <option value="3">中</option>
					                <option value="4">差</option>
						        </select>
						    </div>
						    <div class="search-button-row">
						        <button type="button" class="mui-btn mui-btn-primary" @click="search">搜索</button>
						        <button type="button" class="mui-btn" @click="clearSearchCriteria">清空</button>
						    </div>
						</form>
					</div>
				</div>
				<div class="mui-clearfix"></div>
				<div class="white-bg">
					<div class="mui-scroll-wrapper" id="pullrefresh">
						<div class="mui-scroll">
						 <div class="table-head">  
				            <table align="center">  
				                <thead>  
				                    <tr>  
				                        <th>院系</th>
										<th>宿舍号</th>
										<th>标准</th>
										<th>状态</th>
										<th>操作</th>  
				                    </tr>  
				                </thead>  
				                <tbody>
				                	<tr v-for="(tdData,index) in tableData">  
				                        <td>{{tdData.deptNameShort}}</td>
										<td>{{tdData.roomCode}}</td>
										<td>{{tdData.roomType}}</td>
										<td>
											<span class="mui-badge mui-badge-success" v-if="tdData.situation == 1">优</span>
									    	<span class="mui-badge-warning" v-else-if="tdData.situation == 2">良</span>
									    	<span class="mui-badge-warning" v-else-if="tdData.situation == 3">中</span>
									    	<span class="mui-badge mui-badge-danger" v-else-if="tdData.situation == 4">差</span>
									    	<span v-else class="mui-badge">无</span>
										</td>
										<td><button type="button" @click="cookiesRoomCode(tdData)" id="cookiesRoomCode"
											class="mui-btn mui-btn-primary mui-btn-outlined mui-btn-s">查看</button></td>  
				                    </tr> 
				                </tbody>  
				            </table>  
				        </div>  
				        <div class="loading">下拉加载更多</div>
					 </div>
					</div>
				</div>
			</div>
		</div>

第二：JS部分

<script src="js/vue.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/base.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {//下拉加载更多
					container: '#pullrefresh',
					down: {
						style:'circle',
						callback: pulldownRefresh
					},
					up: {
						//可选，正在加载状态时，上拉加载控件上显示的标题内容
						contentrefresh: '正在加载...',
						//可选，请求完毕若没有更多数据时显示的提醒内容；
						contentnomore:'没有更多数据了',
						//必选，刷新函数
						callback: pullupRefresh
					}
				}	
			});	
//			var pageIndex = 1;//当前页
//			var totalPage = 3;//总页数
			
			var page = 1; //当前页
           
            var totalPage=0;//总页数
			/**
			* 下拉刷新具体业务实现
			*/	
			function pulldownRefresh() {
				setTimeout(function() {
					myVue.renderTable();
					console.log('下拉刷新')
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); 
				}, 1500);
			}
			
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				if(totalPage == 1){
					mui('#pullrefresh').pullRefresh().disablePullupToRefresh();
				}else{
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().enablePullupToRefresh();
						mui('#pullrefresh').pullRefresh().endPullupToRefresh((++page > totalPage));
						if(page <= totalPage){
							console.log(page)
							myVue.renderTable(page);
						}
						
					}, 1500);
				}
			}
			var token = localStorage.getItem("token");
            var myVue = new Vue({
                el:'#box',
                data:{
                	buildDrop:[],//获取楼下拉列表
                	tableData: [],
                	searchCriteria: {
				        buildId: "",
				        roomCode: "",
				        situation: ""
				    },
				    params: {}
                },
                mounted(){
                	this.renderTable();
                	this.getBuildDrop();
                },
                methods:{
                	renderTable(pageIndex) {
//              		var page = 1; 
                		var limit = 10;
                		var params = this.params;
//              		params.page = page;
                		if(pageIndex){
                			params.page = pageIndex;
                		}else{
                			params.page = 1;
                		}
                		params.limit = limit;
		        		axios.get(baseUrl+'wx/health/ssroomhealth/hlist?token='+ token, {
		        			params
						  })
						  .then(function (data) {
						  	console.log(data);
						  	if(data.status==200){
							  	if (data.data.code == 0) {						          
						          totalPage=data.data.page.totalPage;
//						          console.log(myVue.tableData)
						          if(pageIndex){
						          		data.data.page.list.map((elem)=>{
						          			myVue.tableData.push(elem)
						          		})
						          		console.log(myVue.tableData)
			                		}else{
			                			myVue.tableData = data.data.page.list;
			                		}
						        } else {
						          mui.toast(data.data.msg) 
						        }
						    }    
						  })
					   },
					   getBuildDrop(){
							axios.get(baseUrl+"wx/build/build/buildDrop?token="+ token).then(function (data) {
								if(data.status==200){
									if (data.data.code == 0) {
							          myVue.buildDrop = data.data.data;
							        } else {
							          mui.toast(data.data.msg) 
							        }
								}
							})
						},
						search() {
					      myVue.params = {
					        buildId: myVue.searchCriteria.buildId,
					        roomCode: myVue.searchCriteria.roomCode,
					        situation: myVue.searchCriteria.situation
					      };
					      this.renderTable();
					   },
					   clearSearchCriteria() {
					      myVue.params = {
					        buildId: "",
					        roomCode: "",
					        situation: ""
					      };
					      this.renderTable();
					   },
					   cookiesRoomCode(listData){
						  	console.log(listData);
//						  	id:tdData.rid,roomCode:tdData.roomCode
						  	localStorage.setItem("id2",listData.rid);
						  	localStorage.setItem("roomCode2",listData.roomCode);
						  	
//						  	localStorage.setItem("listDatas",listData);
						  	mui.openWindow({
							    url: 'list-details.html', 
							    id:'cookiesRoomCode'
							});
					  }
					    
                	},
            });
		</script>

 

jxg1473819657
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue实现表格中对数据进行转换、处理的方法
10-18
主要介绍了Vue实现表格中对数据进行转换、处理的方法,需要的朋友可以参考下
avue框架表格实现自定义搜索栏，即清空搜索事件
热门推荐
weixin_44770377的博客
12-03 1万+
对搜索栏进行自定义，并通过按钮实现折叠搜索栏效果。自定义效果如下： 折叠前： 折叠后： 1、自定义搜索栏内容 其实也简单，只要在对应的vue文件中\src\views\admin\sysxxfsjl.vue对template 设置slot-scope="scope"和 slot="search"属性即可自定义搜索栏内容： <template slot-scope="scope" slot...
AVUE样式、刷新、字典、清空搜索条件等操作
qq_42440919的博客
05-16 2418
2、下拉框字典的设置3、日期格式的设置if (!
VUE 查询条件重置之后， 子组件数据未置空
最新发布
mqiqe的专栏
06-14 890
在这个例子中，当父组件的 searchQuery 发生变化时（包括重置为空字符串），子组件通过 watch 侦听器来监听这个变化，并相应地更新 searchResults。当 searchQuery 为空时，子组件清空 searchResults 数组。在 Vue 中，如果遇到了查询条件重置后子组件数据未置空的问题，这通常是因为父子组件之间的数据流动或状态管理没有正确设置。
Vue表单重置，条件清空。this.$refs[name].resetFields()；
天青色等烟雨
09-06 2405
Vue表单重置，条件清空。this.$refs[name].resetFields(); 需要注意的是在form表单中，要添加【prop】 代码如下 <template> <div> <Form ref="formItem" :model="formItem" :label-width="80" inline> <FormItem label="名称" prop
vue+Element+select满足条件后将选择框清空
zhouqionger的博客
10-10 1万+
vue+Element+select满足条件将选择框清空前言1、效果展示2、代码实现 前言 问题：当选择下拉框中的某项时，满足了一定的条件，需要将此选择框选中的内容置空。 解决：用watch监听选择值的变化，当值满足条件，添加延时函数setTimeout()将值置为空。一定要添加延时，直接置空的话没有效果！ 1、效果展示 当选择了“江苏大区”或“广东大区”时，清空选中。 2、代码实现 watch监听：当值为“江苏大区”或“广东大区”时，添加延时函数setTimeout()将值置为空。 之前百度了很多，试过
vue 更多筛选 列表字段动态搜索
lemon今天学习了吗？的博客
12-14 2202
一、需求：表格常用功能经常有字段筛选、更多字段筛选弹框来过滤出我们所需要的数据。每一个查询字段都会调用一次查询接口。1.更多筛选字段获取，触发接口查询。点击确定按钮绑定触发的方法；2.列表页面在点击确定之后就触发了绑定在dialog的方法；4.监听在queryForm，自动触发表格接口调用方法；3.接口方法处理获取参数；
vue实现表格数据的增删改查
01-19
在vue中，我们更应该专注于对数据的操作和处理。 比如我们有一个这样的页面： 我们在这个页面里，就实现了增删改查4个功能，点击链接查看demo【http://www.xiabingbao.com/demo/vue-curd/index.html】。 我们把...
Vue Elenent实现表格相同数据列合并
01-22
本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码，供大家参考，具体内容如下 作者：秋名 思路：后台查询表格数据，查询出来后直接传到前端，前端通过foreach循环，然后对相同的表格进行合并。（同...
vue再读48-表格案例-搜索按钮实现功能
qq_41632427的博客
07-26 358
总结
Vue2 搜索框搜索表格内容 展示数据（ElementUI）
m0_48806387的博客
12-30 8049
最近有一个需求，要求页面中的搜索框，搜索表格数据，我这边做了一个demo，大家看一下 这边用的是vue2加上elementui中的table表格和input输入框 首页先把所有代码贴上 <template> <div class="about"> <el-input placeholder="请输入内容" v-model="inputVal" @keyup.enter.native="S...
Vue el-table全表搜索，模糊匹配
一休~的博客
09-17 5308
这是项目管理系统的界面，有一天，老大突然说想增加某某某列的筛选，一天一个需求。我就想着，与其听他说增加某列的筛选，不如我增加一个全表筛选，这样老大就不会再烦我了 getAllList是搜索按钮的click事件，this.keywords绑定了搜索框v-model async getAllList() { this.loading = true; await this.$request({ url: "/cmdb/searchBySome/", method: "get", para.
Vue-实现列表的搜索和排序
xiaoxiannvh的博客
12-16 3814
搜索和排序的功能都是通过计算属性： 1、搜索的主要通过filter过滤出符合条件的数据并保存起来 2、对符合条件的数据进行升降的排序，使用sort排序 <template> <div class="content"> <!-- 头部 --> <div class="header flex-row"> <div class="inner flex-row"> <span>价格排序<.
vue-表格多个条件搜索筛选功能实现（模糊搜索）
weixin_68177823的博客
05-16 3180
vue-表格多个条件搜索筛选功能实现（模糊搜索）
vue结合Element UI如何实现表格的渲染、分页和搜索功能
浮生离梦的博客
02-06 7208
一、Element UI中表格的渲染 对于页面表格中的数据，在页面一开始加载的时候就可以获取的到，可以使用created()的生命周期钩子函数，在里面去调用获取数据的方法，代码如下： created () { this.getUserList() } 在data中定义需要使用到的数据，根据api接口返回的数据，queryInfo是获取用户列表的参数对象，userList是获取的用...
vue搜索框，搜索表格数据并展示
qq_46402927的博客
03-03 5857
vue搜索框搜索表格数据并展示 我们先看看效果图 我这个是最近有个比赛要用到的，我在这里记录一下，不过这个我实现的是边搜索边实现的，也就是这个原因这个搜索有个缺陷就是搜索消耗性能比较的大，数据库的压力很大，由于时间原因，目前先这样，有时间会优化的（优化思路是要节流，就是要有时间差）。废话不多说上代码。 首先我们就是<el-input v-model="findName" class="search" prefix-icon="el-icon-search" placeholder="请输入姓名"
Vuejs008---学生信息管理系统
rngigskt的博客
08-24 917
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 引入vuejs框架 --> <script src="./lib/vue-2.4.0.js"></script> <style> .hFon.
vue——列表返回优化（返回列表保持搜索条件）
03-22 1412
1.把列表查询的条件放在vuex里，进行存储。 2.当进入对应的列表时，判断vuex是否存在查询条件。并进行赋值。 3.当点击左侧菜单栏，判断是否存在当前页，如果不存在就清除当前页在vuex存入的查询条件。
vue路由带参跳转，刷新后参数不消失
feicongcong的博客
08-25 4523
方法一：$router里使用query对象 路由带参数跳转 this.$router.push({ name: 'IcProjectView',//跳转的路由（路由的name） params: {//params id: params.row.id
vue 表格绑定数据源
06-11
在 Vue 中绑定表格数据源可以通过以下步骤实现： 1. 在 Vue 实例中定义表格数据源，比如： ``` data() { return { tableData: [ { name: 'John', age: 25 }, { name: 'Jane', age: 30 }, { name: 'Bob', age: 35 } ] } } ``` 2. 在表格组件中使用 `v-for` 指令循环渲染表格行，如下所示： ``` <template> <table> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr v-for="(item, index) in tableData" :key="index"> <td>{{ item.name }}</td> <td>{{ item.age }}</td> </tr> </tbody> </table> </template> ``` 3. 在表格组件中使用 `v-bind` 指令绑定表格数据源，如下所示： ``` <template> <table :data="tableData"> <!-- 表格内容 --> </table> </template> ``` 以上就是在 Vue 中绑定表格数据源的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值