Element UI 表格实现筛选和翻页功能 - 代码示例
<p>"<template>\n <div>\n <el-input v-model="searchText" placeholder="搜索" style="margin-bottom: 10px;"></el-input>\n <el-table :data="filteredData" style="width: 100%;">\n <el-table-column prop="name" label="姓名"></el-table-column>\n <el-table-column prop="age" label="年龄"></el-table-column>\n <el-table-column prop="gender" label="性别"></el-table-column>\n </el-table>\n <el-pagination\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n :current-page="currentPage"\n :page-sizes="[10, 20, 30, 40]"\n :page-size="pageSize"\n :total="filteredData.length"\n layout="total, sizes, prev, pager, next, jumper">\n </el-pagination>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n searchText: '',\n currentPage: 1,\n pageSize: 10,\n data: [\n { name: '张三', age: 18, gender: '男' },\n { name: '李四', age: 20, gender: '男' },\n { name: '王五', age: 22, gender: '女' },\n { name: '赵六', age: 25, gender: '男' },\n // 更多数据...\n ]\n };\n },\n computed: {\n filteredData() {\n return this.data.filter(item =>\n item.name.toLowerCase().includes(this.searchText.toLowerCase())\n );\n }\n },\n methods: {\n handleSizeChange(val) {\n this.pageSize = val;\n },\n handleCurrentChange(val) {\n this.currentPage = val;\n }\n }\n };\n</script>\n" 在上面的示例中，我们使用<code>el-input</code>组件实现了一个搜索框，用户可以输入关键字进行筛选。在表格中，我们使用<code>el-table-column</code>组件定义了表格的列，并使用<code>prop</code>属性绑定了数据的字段名。我们使用<code>filteredData</code>计算属性来根据搜索框中的关键字进行筛选数据，并在<code>el-table</code>组件中使用这个计算属性作为表格的数据源。最后，我们使用<code>el-pagination</code>组件实现了翻页功能，用户可以选择每页显示的数量，并且可以通过点击页码进行翻页。\n\n注意：上述代码需要在Vue项目中使用Element UI框架才能正常运行。</p>
原文地址: https://www.cveoy.top/t/topic/pNaI 著作权归作者所有。请勿转载和采集!