element表格分页+数据过滤筛选

前言

在el-element的标签里的tableData数据过多时，会导致表格页面操作卡顿。为解决这一问题，有以下解决方法：

分页加载： 将大量数据进行分页，并且只在用户需要时加载当前页的数据，可以减轻页面的数据负担。可以使用像 Element UI 提供的分页组件来实现分页加载功能。
虚拟滚动： 对于大量数据的列表展示，可以考虑使用虚拟滚动技术，只渲染当前可见区域的数据，而不是直接渲染所有数据。Element UI 的 Table 组件也支持虚拟滚动，可以通过相应的配置开启虚拟滚动功能。可参考虚拟滚动其它博主的文章
数据筛选和搜索： 提供数据筛选和搜索功能，让用户可以根据条件快速定位到需要的数据，减少不必要的数据展示。
服务端优化： 如果数据来源于服务端，可以在服务端对数据进行分页、压缩等处理，以减少前端页面加载的数据量。
组件优化： 检查页面中其他组件的性能表现，确保没有其他组件或代码导致页面性能下降。
前端性能优化： 考虑对前端代码进行性能优化，比如减少不必要的重复渲染、减少对大数据量的循环操作等。

效果展示

分页效果展示

搜索效果展示

代码分析

数据结构：

[
  {
    "name1": "名称11",//需要搜索的关键字字段name1
    "name2": "名称21",
    "name3": "名称31",
    "name4": "名称41",
    "ID": 1
  },
  ......
]
1
2
3
4
5
6
7
8
9
10

data：

tableData: [], // 原始数据
currentPage: 1, // 当前页码
pageSize: 10, // 每页显示的数量
searchText: ‘’, // 搜索的文本
filteredData: [], // 搜索后的数据

分页功能

首先，在computed中，使用displayData计算属性来根据当前页码和每页数量筛选出要显示的数据。在el-table标签中绑定displayData：

通过computed属性，我们可以定义根据响应式数据计算的属性，并在模板中使用。Vue会自动追踪依赖关系，当依赖的响应式数据发生变化时，computed属性会重新计算其值。

computed: {
    // 根据当前页码和每页数量计算显示的数据
    displayData () {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.tableData.slice(startIndex, endIndex);
    },
  },
1
2
3
4
5
6
7
8

其次，在methods中，handleSizeChange方法用于处理改变每页显示数量的事件，handleCurrentChange方法用于处理改变当前页码的事件。

// 改变每页显示的数量时触发
handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.currentPage = 1; // 重置当前页码为第一页
},
// 改变当前页码时触发
handleCurrentChange(newPage) {
      this.currentPage = newPage;
},
1
2
3
4
5
6
7
8
9

最后，在mounted中，我们假设通过某种方式获取了原始数据，并将其赋值给tableData数组，若是调用接口，则在调用接口将获取的数据赋值给tableData数组即可。这里示例是用的json数据。

data () {
    return {
      tableData: jsondata,//方法一：使用示例数据进行演示，将json数据赋值给tableData数组
    };
},
mounted() {
    // 方法二：实际情况下可以通过接口请求或其他方式获取数据
    // 假设tableData是从后端获取的原始数据
    this.searchFun();
},
methods: {
	searchFun(){
		//......调用接口
		.then((res) => {this.tableData = res.obj;//将数据赋值给tableData})
		.catch((err) => {console.log("err",err);})
	},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这样，当用户改变每页显示数量或当前页码时，表格会自动根据新的参数重新渲染显示数据，同时Element UI的分页组件也会更新页码和显示的数据数量

过滤数据功能

1、在data中，添加了filteredData用于存储搜索后的数据，searchText用于保存搜索的文本。

searchText: '', // 搜索的文本
filteredData: [], // 搜索后的数据
1
2

2、在computed中，修改了displayData计算属性，使用filteredData进行分页显示。

computed: {
    displayData () {
      // 根据当前页码和每页数量计算显示的数据
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.filteredData.slice(startIndex, endIndex);
    },
},
1
2
3
4
5
6
7
8

3、在mounted钩子中，初始化了tableData和filteredData，并将它们设置为示例数据。你可以根据实际情况从后端获取数据。
4、在methods中，添加了searchTextFun 方法来根据搜索文本过滤数据，并重置当前页码为第一页。若是在调用接口方法获取数据后调用searchTextFun即可。这里用的是name1字段，可视情况改变：item.name1.includes(this.searchText)
.filter()方法直达站

mounted () {
    this.filteredData = this.tableData;
    this.searchTextFun();
},
methods: {
    // 根据搜索文本过滤数据
    searchTextFun () {
      this.filteredData = this.tableData.filter(item =>
        item.name1.includes(this.searchText)
      );//过滤数据
      this.currentPage = 1; // 重置当前页码为第一页
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13

5、在watch中，监听searchText的变化，并在变化时执行搜索操作。

watch: {
    searchText () {
      // 监听搜索文本变化，执行搜索操作
      this.searchTextFun();
    },
  }
1
2
3
4
5
6

这样，当用户输入搜索文本并提交时，表格会根据搜索结果显示相应的数据，并自动根据新的参数重新渲染分页组件。

全部代码

<template>
  <div class="textbox-class">
    <div class="topbox-class">
      <el-input placeholder="搜索姓名"
                prefix-icon="el-icon-search"
                v-model="searchText"
                class="mleft-class searchinput-class">
      </el-input>
    </div>
    <div class="mainbox-class">
      <el-table :data="displayData"
                stripe
                border
                :header-cell-style="{background:'rgb(113 167 228)',color:'white'}"
                highlight-current-row
                style="width: 50%">
        <el-table-column prop="ID"
                         label="ID">
        </el-table-column>
        <el-table-column prop="name1"
                         label="姓名1">
        </el-table-column>
        <el-table-column prop="name2"
                         label="姓名2">
        </el-table-column>
        <el-table-column prop="name3"
                         label="姓名3">
        </el-table-column>
        <el-table-column prop="name4"
                         label="姓名4">
        </el-table-column>
      </el-table>
    </div>
    <div class="botbox-class">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[10]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="tableData.length"></el-pagination>
    </div>
  </div>
</template>

<script>
import jsondata from './test.json';
export default {
  data () {
    return {
      tableData: jsondata,
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的数量
      searchText: '', // 搜索的文本
      filteredData: [], // 搜索后的数据
    };
  },
  created () { },
  computed: {
    displayData () {
      // 根据当前页码和每页数量计算显示的数据
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.filteredData.slice(startIndex, endIndex);
    },
  },
  mounted () {
    this.filteredData = this.tableData;
    this.searchTextFun();
  },
  methods: {
    // 改变每页显示的数量时触发
    handleSizeChange (newSize) {
      this.pageSize = newSize;
      this.currentPage = 1; // 重置当前页码为第一页
    },
    // 改变当前页码时触发
    handleCurrentChange (newPage) {
      this.currentPage = newPage;
    },
    // 根据搜索文本过滤数据
    searchTextFun () {
      this.filteredData = this.tableData.filter(item =>
        item.name1.includes(this.searchText)
      );
      this.currentPage = 1; // 重置当前页码为第一页
    },
  },
  watch: {
    searchText () {
      // 监听搜索文本变化，执行搜索操作
      this.searchTextFun();
    },
  }
};
</script>

<style scoped>
.textbox-class {
  width: 100%;
  height: 100%;
}
.topbox-class {
  height: 5%;
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
}
.mainbox-class {
  height: 55%;
}
.botbox-class {
  height: 3%;
}
.searchinput-class {
  width: 20%;
}
</style> 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119