【Vue入门实践3】不调后端接口==>el | 您所在的位置:网站首页 › 前端查询 › 【Vue入门实践3】不调后端接口==>el |
一个人的心理健康程度与接纳痛苦的程度成正比。------感谢自己的不完美 目录 一、功能效果描述 二、el-table自带筛选功能 三、前端假查询重置功能 1. el-form表单 2.el-table表格数据 3. search功能 4. reset重置功能 一、功能效果描述由于数据量较大,每时每分都会产生数据,当前列表只展示进入页面的最新数据。其中的查询和重置功能都是基于当前数据的,所以要求不调接口,只是前端的查询并展示。但是点击刷新按钮,会调接口,请求到最近的数据,此时列表刷新为最近数据。 至于调接口情况可以看动图中右侧效果。 (1)利用el-table的筛选功能进行前端内容的筛选 (2)点击查询按钮,使用数组操作实现查询,并显示查询结果;对于查询之后再次查询能够还原原始查询数组。 (3)重置功能、刷新功能==>调接口显示最新数据 二、el-table自带筛选功能使用到el-table的筛选功能:Element - The world's most popular Vue UI framework 在列中设置filtersfilter-method属性即可开启该列的筛选,filters 是一个数组,filter-method是一个方法,它用于决定某些数据是否显示,会传入三个参数:value, row 和 column。 因此,我们要在需要筛选的列上加上两项: :filters="筛选备选项数组" :filter-method="filterHandler" // 表格过滤 filterHandler(value, row, column) { const property = column["property"]; return row[property] === value; }, 三、前端假查询重置功能 1. el-form表单 重置 查询 报表详情: 刷新 2.el-table表格数据 {{ scope.$index + 1 }} 查看表格绑定了tableData1,是根据getPerimeterData1()函数调接口获取到的列表数据 3. search功能思路:遍历tableData1数组,对于满足条件的数组元素push到searchData数组,并最终把searchData赋值给tableData1. // 前端实现查询功能 search1() { const key = this.formInline1.name; // 查询表单中的输入 const vm = this; this.tableData1.forEach(function (item) { if (item.sysName.indexOf(key) > -1) { vm.searchData1.push(item); } }); this.tableData1 = this.searchData1; },问题1:查询一次后,再次查询,tableData变成了两次查询的并集===>在每次查询前清空searchdata 问题2:先查询一个不存在的数据后, 再查询其他有数据的也不会显示了。===>因为查询一次之后,tableData的原始查询数组变小了===>需要有一份备份的tableData数据,即tableDataTemp,每次操作时使用tableDatatemp来进行 修改后的无误代码: // 前端实现查询功能 search1() { this.flag1 = true; const key = this.formInline1.name; // 查询表单中的输入 const vm = this; this.searchData1 = []; //清空查询数组-防止多次查询记录一直被push在最后 console.log("查询前", this.tableDataTemp1); this.tableDataTemp1.forEach(function (item) { if (item.sysName.indexOf(key) > -1) { vm.searchData1.push(item); } }); // this.resetData1 = this.tableData1; this.tableData1 = this.searchData1; console.log("查询后", this.tableData1); }, 4. reset重置功能 // 重置数据 reset1() { this.getPerimeterData1(); this.formInline1 = { name: "", }; }, |
CopyRight 2018-2019 实验室设备网 版权所有 |