Element UI 表格实现翻页和高级搜索功能 - 代码示例

以下是使用 Element UI 实现带翻页和高级搜索功能的表格示例代码：\n\nhtml\n<template>\n <div>\n <el-form :inline="true" class="search-form">\n <el-form-item label="关键字">\n <el-input v-model="searchKeyword" placeholder="请输入关键字"></el-input>\n </el-form-item>\n <el-form-item>\n <el-button type="primary" @click="search">搜索</el-button>\n </el-form-item>\n </el-form>\n\n <el-table :data="tableData" border stripe>\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="address" label="地址"></el-table-column>\n </el-table>\n\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="total"\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 tableData: [], // 表格数据\n currentPage: 1, // 当前页码\n pageSize: 10, // 每页显示条数\n total: 0, // 总条数\n searchKeyword: '' // 搜索关键字\n };\n },\n methods: {\n // 获取表格数据\n fetchData() {\n // 根据搜索关键字和分页信息请求数据\n // 示例代码中使用了axios库发送请求\n axios.get('/api/tableData', {\n params: {\n keyword: this.searchKeyword,\n page: this.currentPage,\n pageSize: this.pageSize\n }\n })\n .then(response => {\n this.tableData = response.data.list;\n this.total = response.data.total;\n })\n .catch(error => {\n console.error(error);\n });\n },\n // 搜索按钮点击事件\n search() {\n this.currentPage = 1;\n this.fetchData();\n },\n // 分页条数改变事件\n handleSizeChange(size) {\n this.pageSize = size;\n this.currentPage = 1;\n this.fetchData();\n },\n // 当前页码改变事件\n handleCurrentChange(page) {\n this.currentPage = page;\n this.fetchData();\n }\n },\n mounted() {\n // 页面加载完成后获取表格数据\n this.fetchData();\n }\n};\n</script>\n\n<style>\n.search-form {\n margin-bottom: 20px;\n}\n</style>\n\n\n请注意，示例代码中的fetchData方法是用于请求表格数据的示例，你需要根据实际情况自行实现该方法。同样地，示例代码中的axios库用于发送请求，你需要在项目中安装并导入axios库。另外，你还需要根据实际情况修改表格的列定义和请求的URL等信息。