<>1. paging (html)
1. <el-table 2. :data="nameList" 3. v-loading="nameLoading" 4.
highlight-current-row> 5. <el-table-column prop="name" label=" Full name "></
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
--- Current rows per page @size-change --- When the number of rows per page changes , Trigger function handleSizeChange :current-page ---
Page number currently displayed @current-change --- When the current page number changes , Trigger function handleCurentChange :page-sizes ---
Options to display the number of data bars per page layout="total, sizes, prev, pager, next, jumper" ---- Component layout :
Total number , Number of displays per page , < , Page number , > , Jump ? page :total --- Total number of data background --- Page button add background color
The effect is as follows :

<>2. js Part
1. <script> 2. // Introduce api 3. import { getNameList } from '../../...pathName';
// api Relative path 4. export default { 5. data() { 6. return { 7. nameList: [], 8.
nameLoading: false, // Data loading animation 9. page: 1, 10. rows: 10, 11. total: null 12. }
13. }, 14. methods: { 15. // Obtain nameList 16. GetNameList(page, rows) { 17. let
that= this; 18. that.nameLoading = true; 19. // Parameters required to call background methods msg 20. let msg = {
21. 'id': sessionStorage.getItem('id'), 22. 'page': page, 23. 'rows': rows 24. }
; 25. getNameList(msg).then( res => { 26. // Process data returned in the background 27. // Need Use the returned data Assign to
total 28. // as :that.total = res.data.totalElements; 29. }).catch( error => { 30.
// ... 31. }) 32. }, 33. 34. // paging 35. handleSizeChange(pageValue) { // Formal parameter
pageValue Is the selected page number 36. let rows = this.rows; 37. this.GetNameList(pageValue, rows)
; 38. }, 39. handlePageChange(rowsValue) { // Formal parameter rowsValue Show data bars per selected page 40. let
rows= this.rows; 37. this.GetNameList(page, rowsValue); 41. }, 42. mounted() {
43. this.GetNameList(); 44. } 45. } 46. </script>
<>Tips

Add the first and last lines of the code snippet , And identify the key characters of the language in the first line , as :html,js,css,py,java etc .

markdown The text is as follows :
```html ... ```

Technology
©2019-2020 Toolsou All rights reserved,
Huawei 2021 session Hardware Engineer Logical post (FPGA) Super detailed surface !!!Vue-element-admin upgrade ui edition virtual machine VMware Download and install the most detailed tutorial !C++ Move constructor and copy constructor sound of dripping water java Backstage interview pygame Realize full screen mode and adjustable window size mysql Database setting character set configuration modification my.ini file (windows)30 What's the experience of being a junior programmer at the age of 20 C++ Multithreading programming ( Summary of common functions and parameters )python_ cherry tree