element-ui简易分页

前端页面实现分页查询

思想
1.采用element-ui组件
2.前端页面完成

代码
1.首先需要在数据表格或表单进项操作.主要代码:.slice((currentPage-1)pagesize,currentPagepagesize),

 <div class="e1">
            <el-table 
                 ref="multipleTable" :data="teachers.slice((currentPage-1)*pagesize,currentPage*pagesize)" tooltip-effect="dark" style="width: 100%"  @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              label="教师姓名"
              prop="tname"
              width="120">
            </el-table-column>
            <el-table-column
              prop="tpic"
              label="教师头像"
              width="120">
              <template  slot-scope="scope">
                        <img :src="scope.row.tpic" alt="这是图片" id="img" class="e">
                    </template>
            </el-table-column>
            <el-table-column
              prop="organ"
              label="机构名称"
               width="120">
            </el-table-column>
             <el-table-column
              prop="sort"
              label="排序号"
              width="120">
            </el-table-column>
            <el-table-column
              prop="uptime"
              label="更新时间"
              width="120">
            </el-table-column>
            <el-table-column
              prop="creator"
              label="创建人"
              width="120">
            </el-table-column>
            <el-table-column
                label="操作"
                 width="150">
                 <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" circle @click="edit(scope.$index, scope.row)"></el-button>
               <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.$index, scope.row)"></el-button>
                </template>
                </el-table-column>
            </el-table>
            </div>
            //这是对分页的一些属性及代表含义
             <div>
             <el-pagination
         background  //是否为分页按钮添加背景色
         @size-change="SizeChange" //pageSize 改变时会触发
         @current-change="handleCurrentChange" //currentPage 改变时会触发
        layout="prev, pager, next"
        :total=this.teachers.length  //获取你查询的总数据
        :page-size="pagesize" //每页显示的条数
        :current-page="currentPage"> //默认当前页
</el-pagination>
     </div>

2.声明上述分页变量以及方法,代码如下,注意书写变量名称要一致

<script>
export default {
    data(){
        return{
             // 分页查询绑定
            currentPage:1, //默认当前页
            pagesize:5, //这根据需求自定义每页显示条数
            }
       }     
  } ,
  methods:{
  //分页
        //显示第几页
        handleCurrentChange(val){
            //改变默认的页数
            this.currentPage=val
        },
  }
  </script>         

以上就是个人的一些总结,如有不足,请多指正!