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

// 表格过滤

filterHandler(value, row, column) {

  const property = column["property"];

  return row[property] === value;

},

三、前端假查询重置功能

===========



1\. el-form表单

-------------

 <el-form-item label="设备名称：">

        <el-input

          v-model="formInline1.name"

          placeholder="请输入"

          style="height: 32px"

     ></el-input>

</el-form-item>

<el-form-item>

   <el-button-group>

          <el-button @click="reset1">重置</el-button>

          <el-button type="primary" @click="search1">查询</el-button>

   </

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

el-button-group>

</el-form-item>

  <div class="title-name">报表详情:</div>

  <div class="title-refresh" @click="getPerimeterData1">

  <i class="el-icon-refresh" style="margin-right: 8px"></i>刷新</div>

 2.el-table表格数据

---------------

<el-table

      :data="tableData1"

      style="width: 98%"

      class="tableBox"

      stripe

      max-height="450"

    >

      <el-table-column label="序号" prop="index" width="55">

        <template slot-scope="scope">

          <span>{{ scope.$index + 1 }}</span>

        </template>

      </el-table-column>

      <el-table-column prop="sysName" label="设备名称" align="center">

      </el-table-column>

      <el-table-column label="操作" align="center" width="100">

        <template slot-scope="scope">

          <el-button

            type="text"

            :style="'padding:none'"

            @click="handleDetail1(scope.row)"

            >查看</el-button

          >

        </template>

      </el-table-column>

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

},

最后

---

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。