其他分享
首页 > 其他分享> > Element-UI 项目中 Pagination 分页如何使用 ？？？

Element-UI 项目中 Pagination 分页如何使用 ？？？

作者：互联网

Element-UI 项目中 Pagination 分页如何使用 ？？？
https://blog.csdn.net/helloword176/article/details/108973446

先看效果：

应用场景：

        一般分页功能多用于一些数据量较大的信息展示页面，通过分页可以设置每页的显示数量。多用于和 el-table 结合使用！

属性

参数说明类型可选值默认值
small是否使用小型分页样式boolean—false
background是否为分页按钮添加背景色boolean—false
page-size每页显示条目个数，支持 .sync 修饰符number—10
total总条目数number——
page-count总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性Number——
pager-count页码按钮的数量，当总页数超过该值时会折叠number大于等于 5 且小于等于 21 的奇数7
current-page当前页数，支持 .sync 修饰符number—1
layout组件布局，子组件名用逗号分隔Stringsizes, prev, pager, next, jumper, ->, total, slot'prev, pager, next, jumper, ->, total'
page-sizes每页显示个数选择器的选项设置number[]—[10, 20, 30, 40, 50, 100]
popper-class每页显示个数选择器的下拉框类名string——
prev-text替代图标显示的上一页文字string——
next-text替代图标显示的下一页文字string——
disabled是否禁用boolean—false
hide-on-single-page只有一页时是否隐藏boolean—-

事件

事件名称说明回调参数
size-changepageSize 改变时会触发每页条数
current-changecurrentPage 改变时会触发当前页
prev-click用户点击上一页按钮改变当前页后触发当前页
next-click用户点击下一页按钮改变当前页后触发当前页

Slot

name说明
—自定义内容，需要在 layout 中列出 slot

代码：

  1.       <!-- 表格 -->
  2.       <div class="datas">
  3.         <el-table
  4.           ref="multipleTable"
  5.           :data="tableData"
  6.           tooltip-effect="dark"
  7.           style="width: 100%"
  8.           @selection-change="handleSelectionChange"
  9.         >
  10.           <el-table-column type="selection" width="55"></el-table-column>
  11.           <el-table-column type="index" :index="indexMethod" label="序号"></el-table-column>
  12.           <el-table-column prop="sysPersonName" label="姓名"></el-table-column>
  13.           <el-table-column prop="sysPersonSex" label="性别"></el-table-column>
  14.           <el-table-column prop="sysPersonPhone" label="手机号"></el-table-column>
  15.           <el-table-column prop="sysPersonId" label="编号"></el-table-column>
  16.           <el-table-column prop="sysIfAttendance" label="是否考勤"></el-table-column>
  17.           <el-table-column prop="organizationInfo.sysOrganizationName" label="所属组织"></el-table-column>
  18.           <el-table-column prop="sysRemark" label="备注"></el-table-column>
  19.           <el-table-column fixed="right" label="操作" width="100">
  20.             <template slot-scope="scope">
  21.               <el-button
  22.                 @click="handleClick(scope.row)"
  23.                 type="text"
  24.                 size="small"
  25.                 >消息</el-button
  26.               >
  27.               <el-button @click="godetails(scope.row)" type="text" size="small"
  28.                 >详情</el-button
  29.               >
  30.             </template>
  31.           </el-table-column>
  32.         </el-table>
  33.       </div>
  34.     </div>
  35.     <!-- 分页 -->
  36.     <div class="block">
  37.        <el-pagination
  38.         @size-change="handleSizeChange"
  39.         @current-change="handleCurrentChange"
  40.         :current-page="person.page" 
  41.         :page-sizes="[10]"
  42.         :page-size = 10
  43.         layout="total, sizes, prev, pager, next, jumper"
  44.         :total="totalCount"
  45.       ></el-pagination>
  46.     </div>
  1. <script>
  2. export default {
  3.   data() {
  4.     return {
  5.       tableData: [],
  6.       // 分页
  7.       totalCount: 0, //总条数，总共有多少条数据
  8.       radio: "1",
  9.       // 人员列表数据
  10.       person: {
  11.         limit: 0,
  12.         options: {
  13.         },
  14.         page: 0,
  15.       },
  16.       value: "",
  17.       sendMessagePopups: false,
  18.       form: {
  19.         name: "",
  20.         messageContent: "",
  21.       },
  22.       pages: 0,
  23.       multipleSelection: [],
  24.       messageFrom:{
  25.         messageName: '',
  26.         messageContent:'',
  27.       },
  28.       messageName: ''
  29.     };
  30.   },
  31.   created() {
  32.     this.personTableList();
  33.   },
  34.   methods: {
  35.     // 人员列表
  36.     personTableList() {
  37.       this.person.limit = 10
  38.       this.$http.put("/api/list/person", this.person).then((res) => {
  39.         if (res.data.status === 200) {
  40.           console.log(res.data.data)
  41.           this.pages = res.data.data
  42.           this.tableData = res.data.data.data;
  43.           for (let i = 0; i < this.tableData.length; i++) {
  44.             if (this.tableData[i].sysPersonSex == 1) {
  45.               this.tableData[i].sysPersonSex = "男";
  46.             } else {
  47.               this.tableData[i].sysPersonSex = "女";
  48.             }
  49.             if (this.tableData[i].sysIfAttendance == 1) {
  50.               this.tableData[i].sysIfAttendance = "是";
  51.             } else {
  52.               this.tableData[i].sysIfAttendance = "否";
  53.             }
  54.           }
  55.           this.totalCount = res.data.data.count;
  56.           console.log(this.tableData);
  57.         } else {
  58.           this.$message.error(res.data.message);
  59.           return;
  60.         }
  61.       });
  62.     },
  63.     // 分页
  64.     handleCurrentChange(newPage) {
  65.       this.person.page = newPage
  66.       this.personTableList()
  67.     },
  68.     handleSizeChange(val) {
  69.       this.person.limit = val
  70.       this.personTableList()
  71.     },
  72.     // 表格数据索引累加
  73.     indexMethod(index){
  74.       return(this.pages.page-1) * 10 + index + 1
  75.     },
  76.     
  77.  
  78.   },
  79.  
  80.   
  81. };
  82. </script>

 

标签：Pagination,res,当前页,page,person,UI,Element,data,tableData
来源： https://www.cnblogs.com/sunny3158/p/16247080.html