一、功能效果描述
========
由于数据量较大，每时每分都会产生数据，当前列表只展示进入页面的最新数据。其中的查询和重置功能都是基于当前数据的，所以要求不调接口，只是前端的查询并展示。但是点击刷新按钮，会调接口，请求到最近的数据，此时列表刷新为最近数据。
至于调接口情况可以看动图中右侧效果。
（1）利用el-table的筛选功能进行前端内容的筛选
（2）点击查询按钮，使用数组操作实现查询，并显示查询结果；对于查询之后再次查询能够还原原始查询数组。
（3）重置功能、刷新功能==>调接口显示最新数据
二、el-table自带筛选功能
================
使用到el-table的筛选功能：Element - The world's most popular Vue UI framework
在列中设置filters``filter-method属性即可开启该列的筛选，filters 是一个数组，filter-method是一个方法，它用于决定某些数据是否显示，会传入三个参数：value, row 和 column。
因此，我们要在需要筛选的列上加上两项：
:filters="筛选备选项数组"
:filter-method="filterHandler"
<el-table-column
prop="stationName"
label="站点名称"
align="center"
:filters="stationList"
:filter-method="filterHandler"
// 表格过滤
filterHandler(value, row, column) {
const property = column["property"];
return row[property] === value;
},
三、前端假查询重置功能
===========
1. el-form表单
<el-input
v-model="formInline1.name"
placeholder="请输入"
style="height: 32px"
<el-button @click="reset1">重置
<el-button type="primary" @click="search1">查询
刷新
2.el-table表格数据
<el-table
:data="tableData1"
style="width: 98%"
class="tableBox"
stripe
max-height="450"
表格绑定了tableData1，是根据getPerimeterData1()函数调接口获取到的列表数据
3. search功能
思路：遍历tableData1数组，对于满足条件的数组元素push到searchData数组，并最终把searchData赋值给tableData1.
// 前端实现查询功能
search1() {
const key = this.formInline1.name; // 查询表单中的输入
const vm = this;
最后
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了
