1. element-uiとイベントのコンポーネントを紹介します
2.必要なデータをバインドします(通常、データはテーブルと結合されます)
3。テーブルのデータをポケットベルのデータに対応させます
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="list.length"
></el-pagination>
currentPage: 1, //初始页
pagesize: 20, // 每页的数据
total: 0, // 总共的条数
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function (size) {
this.pagesize = size;
console.log(this.pagesize); //每页下拉显示数据
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
console.log(this.currentPage); //点击第几页
},
- リストは取得したデータであり、取得したデータはテーブルに表示したいデータにスライスされます
<el-table
style="width: 100%;"
:data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
>
<el-table-column label prop width="50">
<input type="checkbox" />
</el-table-column>
<el-table-column label prop width="50">
<template slot-scope="scope">
<img :src="scope.row.avatar" alt />
</template>
</el-table-column>
<el-table-column label="学生名称" prop="nickname" width="180"></el-table-column>
<el-table-column label="手机号" prop="mobile" width="180"></el-table-column>
<el-table-column label="状态" prop="status" width="180"></el-table-column>
<el-table-column label="创建时间" prop="created_at" width="200"></el-table-column>
<el-table-column label="操作">详情-编辑-禁用-删除-重置密码</el-table-column>
</el-table>