zoukankan      html  css  js  c++  java
  • Element-ui(el-table、el-pagination)实现表格分页

    HTML代码:(重点关注el-table中:data数据的绑定)

    el-pagination中:

    layout代表组件布局,子组件名用逗号分隔 
    属性: total代表总条目数 
    事件: current-change用于监听页数改变,而内容也发生改变

    <template>
      <div>
        <el-table
          ref="multipleTable"
          :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          tooltip-effect="dark"
          style=" 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄"
            width="120">
          </el-table-column>
          <el-table-column
            prop="sex"
            label="性别"
            width="120">
          </el-table-column>
          <el-table-column
            prop="department"
            label="部门"
            width="150">
          </el-table-column>
          <el-table-column
            prop="floor"
            label="楼层"
            width="120">
          </el-table-column>
          <el-table-column
            prop="area"
            label="区域"
            width="120">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">修改
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 30px;">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="current_change">
          </el-pagination>
        </div>
      </div>
    </template>

    js代码:(addUser函数中请求的是用express搭建的服务器,tableData存放返回的json数据)

    export default {
        name: "dataList",
        data() {
          return {
            tableData: [],
            multipleSelection: [],
            total: 0,
            pagesize:10,
            currentPage:1
          }
        },
        methods: {
          addUser() {
            this.$http({
              method: 'GET',
              url: 'http://127.0.0.1:8080/api/users',
            }).then(res => {
              console.log(res);
              if (!res.data.errno) {
                this.tableData = res.data.data.users;
                this.total= res.data.totalnum;
              }
            })
              .catch(function (error) {
                console.log(error);
              });
          },
    
          current_change:function(currentPage){
            this.currentPage = currentPage;
          },
        mounted: function () {
        this.addUser();
        }
    }

     最终效果:

  • 相关阅读:
    week4:周测错题
    小程序1:登录/注册小程序
    小程序2:实现一个购物车
    day26:装饰器&面向对象当中的方法&property
    day25:7个魔术方法&5个关于类的魔术属性
    day24:多态&魔术方法__new__&单态模式
    day23:单继承&多继承&菱形继承&__init__魔术方法
    day22:面向对象封装对象操作&类操作&面向对象删除操作
    day21:正则函数&模块和包(import)
    APP探索之iAPP
  • 原文地址:https://www.cnblogs.com/dreamsqin/p/9341230.html
Copyright © 2011-2022 走看看