1.下载插件
"axios": "^1.7.9",
"element-plus": "^2.9.1",
"@element-plus/icons-vue": "^2.3.1",
"vue-router": "^4.5.0"
2.引入插件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'
import router from './route/router';
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus)
app.use(router)
app.mount('#app')
3.创建组件
4.配置路由
import {createRouter, createWebHistory} from "vue-router"
let router=createRouter({
history:createWebHistory(),
base:'Love',
routes:[
{ path:'/',
component:Login
},
{
path:'/index',
component:index,
children:[
{
path:"emp",
component:()=>import("../components/home/emp.vue")
}
]
}]})
export default router;
-
配置好后，别忘了使用路由在main.js文件里，最后别忘了设置 默认<router-view />
5.使用elementplus编写前端页面(下面以表格的基本操作为例，详细介绍该组件的使用)
-
elment-plus表格组件
-
1.先下载axios组件
import axios from 'axios';
-
2.使用axios向接口发送get请求获取数据
const fetchData = async () => {try {const response = await axios.get('http://localhost:8080/api/emp', {
});const { users, total } = response.data;console.log(response.data.users);tableData.value=response.data.users;
} catch (error) {console.error('Error fetching data:', error);}
};
-
导入vue相关函数，使用vue的生命周期加载数据
import { ref, onMounted, computed } from 'vue';
-
在html模板挂载后获取数据，使用Onmounted函数获取数据
onMounted(() => {fetchData(); // 组件挂载时自动加载数据
});
-
页面一加载就会获取数据，获取数据如下
-
3.把获取的数据渲染到element-plus表格
-
定义一个响应式的参数，把请求到的数据给这个参数
const tableData=ref([])
tableData=response.data.users;
-
再把响应式数据给表格数据进行双向绑定
-
把表格属性改为后台请求到的属性
<el-table :data="tableData" style="width: 100%"><el-table-column type="selection" width="55" /><el-table-column property="empNo" label="empNo" width="120" /><el-table-column property="eName" label="eName" width="120" /><el-table-column property="job" label="job" width="120" /><el-table-column property="mgr" label="mgr" width="120" /><el-table-column property="hireDate" label="hireDate" width="120" /><el-table-column property="sal" label="sal" width="120" /><el-table-column property="comm" label="comm" width="120" /><el-table-column property="deptNo" label="deptNo" width="120" /></el-table>
-
最后表格展示如下
6.分页功能的基本实现
-
1.引入分页elementplus分页插件
<el-paginationlayout="total, sizes, prev, pager, next, jumper":total="totalItems":page-size="pageSize":current-page="currentPage"@size-change="handleSizeChange"@current-change="handleCurrentChange":page-sizes="[3, 6, 9, 12]"style="margin-top: 20px;"></el-pagination>
属性
layout (String) 定义了分页组件的布局，即哪些部分应该显示以及它们的顺序。 可以包含以下选项（用逗号分隔）： total: 显示总条目数 sizes: 每页大小选择器 prev: 上一页按钮 pager: 分页器（页码列表） next: 下一页按钮 jumper: 快速跳转输入框 示例："total, sizes, prev, pager, next, jumper" 表示按照这个顺序显示所有这些元素。 :total (Number) 数据总量，用于计算总页数。 在您的例子中绑定到了 totalItems，这意味着它是从数据源动态获取的。 :page-size (Number) 每页显示的数据条目数量。 在您的例子中绑定到了 pageSize，表示可以根据用户的交互改变。 :current-page (Number) 当前选中的页面编号。 在您的例子中绑定到了 currentPage，同样地，这会根据用户的操作更新。 :page-sizes (Array) 用户可以选择的每页条目数的选项数组。 在您的例子中是 [3, 6, 9, 12]，意味着用户可以在这些值之间选择每页显示多少条记录。 事件 @size-change 当用户从每页大小选择器中选择了新的条目数时触发。 回调函数接收一个参数，即新的每页条目数。 在您的例子中，当发生此事件时会调用 handleSizeChange 方法。 @current-change 当用户点击了不同的页面链接或者使用快速跳转输入框改变了当前页面时触发。 回调函数接收一个参数，即新的当前页面编号。 在您的例子中，当发生此事件时会调用 handleCurrentChange 方法
-
显示效果
-
实时获取用户改变时的当前页，以及页面大小
// 分页事件处理器const handleSizeChange = (newSize: number) => {pageSize.value = newSize;};const handleCurrentChange = (newPage: number) => {currentPage.value = newPage;};
-
使用计算属性裁剪查询到的所有数据，控制页面数据显示
const paginatedData = computed(() => {const start = (currentPage.value - 1) * pageSize.value;const end = start + pageSize.value;return allData.value.slice(start, end);});
-
最后把裁剪好的数据给表格即可
-
前端分页思路：先发送请求获取完整数据，然后获取前端用户输入当前页和页面大小，进行计算截取，最后把截取后数据给表格进行绑定，显示分页数据 -
后端分页思路：先获取用户输入当前页，以及页面大小，然后向后端发送请求，后端进行分页，把分页后的数据进行返回