用elementui实现table可筛选 可翻页的功能

要使用 Element UI 实现可筛选和可翻页的表格功能，你可以按照以下步骤进行操作：

1. 首先，引入 Element UI 的相关组件和样式文件。在你的项目中，可以通过 npm 安装 Element UI，然后在需要使用的页面中引入相关组件和样式文件。

2. 创建一个表格组件，并在该组件中使用 <el-table> 组件来展示数据。同时，你可以在 <el-table> 组件中设置 :data 属性来绑定要展示的数据源。

3. 在表格组件中添加筛选功能。你可以使用 <el-input> 组件作为筛选条件的输入框，并通过 v-model 绑定到一个变量上。然后，在 <el-table> 组件中使用 :filter-method 属性来设置筛选方法，该方法将会接收两个参数：筛选条件和当前行的数据。你可以在该方法中实现自定义的筛选逻辑，并返回一个布尔值来决定是否显示该行数据。

4. 实现翻页功能。Element UI 提供了 <el-pagination> 组件来实现翻页功能。你可以在表格组件中使用该组件，并设置相关属性，如 :total（总数据量）、:page-size（每页显示数据量）、:current-page（当前页码）等。同时，你还需要在 <el-table> 组件中使用 :row-start-index 和 :row-key 属性来指定当前页的数据起始索引和唯一标识字段。

5. 在表格组件中监听翻页事件。当用户点击翻页按钮时，会触发 <el-pagination> 的 @current-change 事件。你可以在该事件处理函数中更新当前页码，并重新计算当前页的数据起始索引。

6. 最后，你可以根据需要自定义表格的列和样式，以及其他功能，如排序、分组等。

以上是一个大致的实现思路，具体的代码实现可能会根据你的项目需求和数据结构有所不同。你可以参考 Element UI 的官方文档和示例代码来进一步了解和实践这些功能