Vue项目Element-UI表格el-table的分页el-pagination功能简单封装
25-04-07
slbcun
569℃
0
表格代码 Table.vue
<!-- * @Author: Han * @Date: 2022-01-13 14:00:49 * @LastEditors: Han * @LastEditTime: 2022-01-14 14:22:15 --> <template> <section class="content"> <div class="theTable"> <el-table :data="tableData" border :header-cell-style="{background:'#f5f7fa'}" > <el-table-column type="index" label="序号" header-align="center" align="center" width="50" > </el-table-column> <el-table-column prop="userId" label="用户ID" header-align="center" align="center" width="146" > </el-table-column> <el-table-column prop="userName" label="姓名" header-align="center" align="center" > </el-table-column> <el-table-column prop="mobile" label="用户账号" header-align="center" align="center" width="146" > </el-table-column> <el-table-column label="用户类别" header-align="center" align="center"> <template slot-scope="scope"> <span>{{scope.row.userType=='TEACHER'?'教师':'学生'}}</span> </template> </el-table-column> <el-table-column prop="schoolName" label="学校名称" header-align="center" align="center" > </el-table-column> <el-table-column label="操作" header-align="center"> <template slot-scope="scope"> <div class="caozuo"> <span @click="setDIALOG(true,scope.row)" >{{scope.row.status=='DISABLED' ?'启用':'禁用'}}</span > </div> </template> </el-table-column> </el-table> </div> <Paging :pageData="pageData" @pageSizeChan="pageSizeChan" /> </section> </template> <script> export default { components: { Paging: () => import("@/components/Paging"), }, data() { return { tableData: [], pageData: { thepageSize: 10, pageIndex: 1, dataTotal: 0, }, }; }, methods: { // 分页功能 pageSizeChan(pg) { this.pageData.pageIndex = pg; this.数据请求函数(); }, }, }; </script>
分页组件代码 Paging.vue
<!-- * @Author: Han * @Date: 2022-01-13 14:24:52 * @LastEditors: Han * @LastEditTime: 2022-01-13 14:25:17 --> <template> <div class="thePage" v-if="pageData.dataTotal > 0"> <span>第{{pageData.pageIndex}}页/{{pageData.dataTotal}}条数据</span> <el-pagination background @current-change="pageChange" :page-size="pageData.thepageSize" :current-page="pageData.pageIndex" layout="prev, pager, next, jumper" :total="pageData.dataTotal" > </el-pagination> </div> </template> <script> export default { props: { pageData: { type: Object, default: null, }, }, methods: { // 换页功能 pageChange(nowPage) { this.$emit("pageSizeChan", nowPage); }, }, }; </script> <style> .thePage { display: flex; align-items: center; float: right; padding: 24px 0 24px; font-size: 14px; } </style>