当前位置 主页 > 网站技术 > 代码类 > 最大化 缩小

    Vue+ElementUI table实现表格分页

    栏目:代码类 时间:2019-12-14 18:06

    Vue+ElementUI table表格分页,供大家参考,具体内容如下

    分页的两种方式。前端分页,后端分页。两种方式各有个的优缺点吧。

    前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理。但数据量不能太大,因为前端是先一次性加载所有数据,然后在做分页处理。在数据量多的情况下,加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。

    后端分页:因为是后端分页,前端在每点击一次分页时,便向后台请求一次数据。其实就是避免前端一次性从数据库获取大量数据

    一、在elementUI中将表格、分页引入自己的页面中

    <template>
     <div class="app">
       <el-table :data="tableData" >
         <el-table-column prop="date" label="日期" width="180"></el-table-column>
         <el-table-column prop="name" label="姓名" width="180"></el-table-column>
         <el-table-column prop="address" label="地址"></el-table-column>
       </el-table>
       <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
       </el-pagination>
     </div>
     </template>
     <script>
      export default {
       data() {
        return {
         tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
         }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
         }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
         }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
         }],
         // 默认显示第一条
         currentPage:1
        }
       },
       methods: {
         handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
         },
         handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
         }
        },
      }
    </script>

    二、前端分页(在一的基础上添加分页功能)

    <template>
     <div class="app">  
       <!-- 将获取到的数据进行计算 -->  
       <el-table :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" >
         <el-table-column prop="date" label="日期" width="180"></el-table-column>
         <el-table-column prop="name" label="姓名" width="180"></el-table-column>
         <el-table-column prop="address" label="地址"></el-table-column>
       </el-table>
       <div class="tabListPage">
          <el-pagination @size-change="handleSizeChange" 
                 @current-change="handleCurrentChange" 
                 :current-page="currentPage" 
                 :page-sizes="pageSizes" 
                 :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" 
                 :total="totalCount">
           </el-pagination>
        </div>
    </div>
    </template>
    <script>
    export default {
      data(){
        return {
          // 总数据
          tableData:[],
          // 默认显示第几页
          currentPage:1,
          // 总条数,根据接口获取数据长度(注意:这里不能为空)
          totalCount:1,
          // 个数选择器(可修改)
          pageSizes:[1,2,3,4],
          // 默认每页显示的条数(可修改)
          PageSize:1,
        }
      },
     methods:{
        getData(){
           // 这里使用axios,使用时请提前引入
           axios.post(url,{
             orgCode:1
           },{emulateJSON: true},
           {
            headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",} 
           }
           ).then(reponse=>{
              console.log(reponse)
              // 将数据赋值给tableData
              this.tableData=data.data.body
              // 将数据的长度赋值给totalCount
              this.totalCount=data.data.body.length
           }) 
         },
        // 分页
        // 每页显示的条数
        handleSizeChange(val) {
          // 改变每页显示的条数 
          this.PageSize=val
          // 注意:在改变每页显示的条数时,要将页码显示到第一页
          this.currentPage=1
        },
         // 显示第几页
        handleCurrentChange(val) {
          // 改变默认的页数
          this.currentPage=val
        },
      },
      created:function(){
         this.getData() 
      }
    }
    </script>
    
    下一篇:没有了