【Vue入门实践3】不调后端接口==＞el-table单纯前端实现查询和重置功能==＞【el-table组件使用】表格静态前端筛选、查询重置功能

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总

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”

{{ scope.$index + 1 }}

<el-button

type=“text”

:style=“‘padding:none’”

@click=“handleDetail1(scope.row)”

查看</el-button

表格绑定了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);

},

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】