<>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 ... ```

技术
©2019-2020 Toolsou All rights reserved,
css中上下左右居中的几种实现方法[CISCN 2019 初赛]Love Mathc/c++语言实现登陆界面Unity3D 人称设置(第一人称视角、第三人称视角)Fastadmin框架自定义搜索操作流程2021最新Python自动化软件测试笔试题(含答案)黑客帝国装逼的代码雨mysql数据库设置字符集配置修改my.ini文件(windows)python之panda模块1Python学习笔记:基础+进阶10道练习题