[JavaScript知识库]Vue + ElementUI 表格分页显示

Vue + ElementUI 表格分页显示

🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄🎄

<template>
		<!-- 表格 -->
    <el-table 
    :data="noticeList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
    border style="width: 100%">
      <el-table-column 
        label="序号" 
        align="center" 
        prop="id"
       />
      <el-table-column
        label="姓名"
        align="center"
        prop="name"
      />
      <el-table-column
        label="年龄"
        align="center"
        prop="age"   
      />
      <el-table-column
        label="电话"
        align="center"
        prop="phone"
      />
    </el-table>
	 <!-- 分页器 -->
    <div class="block" style="margin-top:15px;">
        <el-pagination 
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange" 
            :current-page="currentPage" 
            :page-sizes="[10, 20, 30, 40, 50]" 
            :page-size="pageSize" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="total">
        </el-pagination>
    </div>
</template>
<!-- 分页数据 -->
<script>
    export default {
        data(){
            // 表格数据
            noticeList: [],
            // 总条数
            total: 0,
            // 当前页数
            currentPage: 1, 
            // 每页显示的数据总数
            pageSize: 10,
        }，
        methods:{
          	// 每页条数改变时触发 选择一页显示多少行
  					handleSizeChange(val) {
          		this.currentPage = 1;
          		this.pageSize = val;
        		},
          	// 当前页改变时触发 跳转其他页
          	handleCurrentChange(val) {
           	  this.currentPage = val;
          	},
        }
	}
</script>