Vue element 分页

Vue单页面，有一个带分页的表格，表格内数据关联页码，套路如下：

代码如下：

          <div class="c-table-list auth-list m-bottom-20">
              <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" :default-sort="{prop:'value4',order:'descending'}" stripe> <el-table-column label="序号" width="100" align="left" type="index"></el-table-column> <el-table-column label="中文名称" align="left" prop="value1"></el-table-column> <el-table-column label="登录名" align="left" prop="value2"></el-table-column> <el-table-column label="状态" align="left" prop="value3"></el-table-column> <el-table-column label="注册时间" align="left" prop="value4" sortable></el-table-column> <el-table-column label="性别" align="left" prop="value5"></el-table-column> <el-table-column label="部门" align="left" prop="value6"></el-table-column> <el-table-column label="岗位" align="left" prop="value7"></el-table-column> <el-table-column label="操作" align="left"> <template slot-scope="scope"> <div> <a @click="onSubmit" class="show-underline a-click" href="#">查看</a> <a @click="onSubmit" class="show-underline a-click" href="#">编辑</a> <a @click="onSubmit" class="show-underline a-click" href="#">删除</a> </div> </template> </el-table-column> </el-table> </div> <div class="t-right"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 30, 40]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" prev-text="上一页" next-text="下一页" :total="tableData.length"> </el-pagination> </div>

该方法是每页显示多少数据的截取方法 :data="tableData.slice((currentPage-1)pagesize,currentPagepagesize)"；

以下是script内代码：

export default {
    data () {
        return {
            currentPage: 1, pagesize: 5, formInline: { user: '', region: '' }, tableData: [ { value1: '光电缆政治工区域', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:30:15', value5: '男', value6: '黄石通信车间', value7: '主任' }, { value1: '赵永铭', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:30:16', value5: '女', value6: '汉口动车组无线检修工区', value7: '副主任' }, { value1: '汉口动车组无线检修工区', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:30:17', value5: '男', value6: '汉口动车组无线检修工区', value7: '车间主任' }, { value1: '光电缆政治工区域', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:30:18', value5: '男', value6: '黄石通信车间', value7: '主任' }, { value1: '赵永铭', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:30:19', value5: '女', value6: '汉口动车组无线检修工区', value7: '副主任' }, { value1: '汉口动车组无线检修工区', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:30:26', value5: '男', value6: '汉口动车组无线检修工区', value7: '车间主任' }, { value1: '光电缆政治工区域', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:30:36', value5: '男', value6: '黄石通信车间', value7: '主任' }, { value1: '赵永铭', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:30:46', value5: '女', value6: '汉口动车组无线检修工区', value7: '副主任' }, { value1: '汉口动车组无线检修工区', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:30:66', value5: '男', value6: '汉口动车组无线检修工区', value7: '车间主任' }, { value1: '汉口动车组无线检修工区', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:31:16', value5: '男', value6: '汉口动车组无线检修工区', value7: '车间主任' }, { value1: '汉口动车组无线检修工区', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:31:16', value5: '男', value6: '汉口动车组无线检修工区', value7: '车间主任' } ] }; }, methods: { onSubmit () { alert('Have not been done!'); }, handleSizeChange: function (size) { this.pagesize = size; }, handleCurrentChange: function (currentPage) { this.currentPage = currentPage; } } };

效果如图：

 

 

Vue单页面，有一个带分页的表格，表格内数据关联页码，套路如下：

代码如下：

          <div class="c-table-list auth-list m-bottom-20">
              <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" :default-sort="{prop:'value4',order:'descending'}" stripe> <el-table-column label="序号" width="100" align="left" type="index"></el-table-column> <el-table-column label="中文名称" align="left" prop="value1"></el-table-column> <el-table-column label="登录名" align="left" prop="value2"></el-table-column> <el-table-column label="状态" align="left" prop="value3"></el-table-column> <el-table-column label="注册时间" align="left" prop="value4" sortable></el-table-column> <el-table-column label="性别" align="left" prop="value5"></el-table-column> <el-table-column label="部门" align="left" prop="value6"></el-table-column> <el-table-column label="岗位" align="left" prop="value7"></el-table-column> <el-table-column label="操作" align="left"> <template slot-scope="scope"> <div> <a @click="onSubmit" class="show-underline a-click" href="#">查看</a> <a @click="onSubmit" class="show-underline a-click" href="#">编辑</a> <a @click="onSubmit" class="show-underline a-click" href="#">删除</a> </div> </template> </el-table-column> </el-table> </div> <div class="t-right"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 30, 40]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" prev-text="上一页" next-text="下一页" :total="tableData.length"> </el-pagination> </div>

该方法是每页显示多少数据的截取方法 :data="tableData.slice((currentPage-1)pagesize,currentPagepagesize)"；

以下是script内代码：

export default {
    data () {
        return {
            currentPage: 1, pagesize: 5, formInline: { user: '', region: '' }, tableData: [ { value1: '光电缆政治工区域', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:30:15', value5: '男', value6: '黄石通信车间', value7: '主任' }, { value1: '赵永铭', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:30:16', value5: '女', value6: '汉口动车组无线检修工区', value7: '副主任' }, { value1: '汉口动车组无线检修工区', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:30:17', value5: '男', value6: '汉口动车组无线检修工区', value7: '车间主任' }, { value1: '光电缆政治工区域', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:30:18', value5: '男', value6: '黄石通信车间', value7: '主任' }, { value1: '赵永铭', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:30:19', value5: '女', value6: '汉口动车组无线检修工区', value7: '副主任' }, { value1: '汉口动车组无线检修工区', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:30:26', value5: '男', value6: '汉口动车组无线检修工区', value7: '车间主任' }, { value1: '光电缆政治工区域', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:30:36', value5: '男', value6: '黄石通信车间', value7: '主任' }, { value1: '赵永铭', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:30:46', value5: '女', value6: '汉口动车组无线检修工区', value7: '副主任' }, { value1: '汉口动车组无线检修工区', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:30:66', value5: '男', value6: '汉口动车组无线检修工区', value7: '车间主任' }, { value1: '汉口动车组无线检修工区', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:31:16', value5: '男', value6: '汉口动车组无线检修工区', value7: '车间主任' }, { value1: '汉口动车组无线检修工区', value2: 'wertyukjhg', value3: '启用', value4: '2018-05-03 09:31:16', value5: '男', value6: '汉口动车组无线检修工区', value7: '车间主任' } ] }; }, methods: { onSubmit () { alert('Have not been done!'); }, handleSizeChange: function (size) { this.pagesize = size; }, handleCurrentChange: function (currentPage) { this.currentPage = currentPage; } } };

效果如图：