标签：pagination rows element vue let 每页 total page GetNameList
1. 分页(html)
1. <el-table
2. :data="nameList"
3. v-loading="nameLoading"
4. highlight-current-row>
5. <el-table-column prop="name" label="姓名"></el-table-column>
6. </table>
7. <el-pagination
8. @size-change="handleSizeChange"
9. @current-change="handleCurentChange"
10. :current-page="page"
11. :page-size="rows"
12. :page-sizes="[10, 20, 50, 100]"
13. layout="total, sizes, prev, pager, next, jumper"
14. :total="total"
15. background
16. >
:page-size --- 当前每页显示行数
@size-change --- 每页显示行数变化时，触发函数handleSizeChange
:current-page --- 当前显示页码
@current-change --- 当前页码变化时，触发函数handleCurentChange
:page-sizes --- 每页显示数据条数的选项
layout="total, sizes, prev, pager, next, jumper" ---- 组件布局：
总条数,每页显示数, < , 页码 ， > ，跳转？页
:total --- 数据总条数
background --- 分页按钮添加背景色
效果如下：
2. js 部分
1. <script>
2. // 引入 api
3. import { getNameList } from '../../...pathName'; // api相对路径
4. export default {
5. data() {
6. return {
7. nameList： [],
8. nameLoading: false, // 数据加载动画
9. page: 1,
10. rows: 10,
11. total: null
12. }
13. },
14. methods: {
15. // 获取 nameList
16. GetNameList(page, rows) {
17. let that = this;
18. that.nameLoading = true;
19. // 调用后台方法所需的参数 msg
20. let msg = {
21. 'id': sessionStorage.getItem('id'),
22. 'page': page,
23. 'rows': rows
24. };
25. getNameList(msg).then( res => {
26. // 处理后台返回的数据
27. // 需要 用返回的数据 赋值给 total
28. // 如：that.total = res.data.totalElements;
29. }).catch( error => {
30. // ...
31. })
32. },
33.
34. // 分页
35. handleSizeChange(pageValue) { // 形参 pageValue 为选中的页码
36. let rows = this.rows;
37. this.GetNameList(pageValue, rows);
38. },
39. handlePageChange(rowsValue) { // 形参 rowsValue 为选中的每页显示数据条数
40. let rows = this.rows;
37. this.GetNameList(page, rowsValue);
41. },
42. mounted() {
43. this.GetNameList();
44. }
45. }
46. </script>
Tips
代码片段首尾行加上， 并在首行标识语言的关键字符，如：html、js、css、py、java等。
markdown文本如下：
```html
...
```
标签：pagination,rows,element,vue,let,每页,total,page,GetNameList 来源： https://blog.csdn.net/huoren_no1/article/details/100034991
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。