vue+element实现前端分页及前端搜索功能

1. 页面布局
2. <template>
3.     <div>
4.         <el-row>
5.             <el-col :span="6">
6.                 <el-input v-model="name" placeholder="输入名称搜索">></el-input>
7.             </el-col>
8.             <el-col :span="2">
9.                 <el-button type="success" @click="search">搜索</el-button>
10.             </el-col>
11.         </el-row>
12.         <el-table :data="tableData">
13.             <el-table-column label="名称" prop="name"></el-table-column>
14.             <el-table-column label="数量" prop="age"></el-table-column>
15.         </el-table>
16.         <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
17.             :page-sizes="[1, 2,5, 10]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
18.             :total="total">
19.         </el-pagination>
20.     </div>
21. </template>
22. 绑定数据
23. data() {
24.         return {
25.                 tableData: [{name:'qweqw',age:'123'},{name:'qweqw123',age:'123456'}],
26.                 data: [],
27.                listQuery: { name: undefined, limit:10, page:1 },
28.                 page: 1,
29.                 name: "",
30.             }
31.         },
32. 获取数据，因为没有后台，就前台模拟取了数据
33.  created() {
34.             this.pageList()
35.         },
36. 注意： 首次展示数据时，将全部数据暂存保存在this中，方便之后操作，
37.  

38. pageList() {
      // 发请求拿到数据并暂存全部数据,方便之后操作
      this.Data = this.tableData
      this.listQuery.page = 1;
      this.getList()
    },

39. // 获取数据
    getList(){
      // es6过滤得到满足搜索条件的展示数据list
      let list=[]
      if(this.listQuery.name){
        list = this.Data.filter((item, index) =>
          item.date1.includes(this.listQuery.name)
        )
      }
      else{
        list=this.Data
      }
      this.tableData = list.filter((item, index) =>
        index < this.listQuery.page * this.listQuery.limit && index >= this.listQuery.limit * (this.listQuery.page - 1)
      )
      this.total = list.length
    },

40. 当每页数量改变
41. handleSizeChange(val) {
42.                 console.log(`每页 ${val} 条`);
43.                 this.listQuery.limit = val
44.                 this.getList()
45.  },
46. 当当前页改变
47.  handleCurrentChange(val) {
48.                 console.log(`当前页: ${val}`);
49.                 this.listQuery.page = val
50.                 this.getList()
51.             },
52. search() {
53.      this.listQuery.page = 1;

    this.getList();
    }

54.