vue + element-ui --pagination 实现对返回的后台数据分页

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