zoukankan      html  css  js  c++  java
  • vue+element-ui 实现分页

    <el-table ref="multipleTable" 
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
        stripe 
        tooltip-effect="dark" 
        style="100%" 
        @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="日期" width="220">
            <template slot-scope="scope">{{scope.row.date | dateFormat}}</template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" width="220">
            <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 class="block">
          <el-pagination  
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange" 
            :current-page="currentPage" 
            :page-sizes="[2, 4, 6, 8]" 
            :page-size="pagesize" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="total">
          </el-pagination>
        </div>
    data() {
        return {
          stripe: true,
          currentPage: 1,
          pagesize: 2,
          total: "",
          tableData:[],
          multipleSelection: []
        };
      },
      methods: {
        handleSelectionChange(val) {
          this.multipleSelection = val;
          console.log(this.multipleSelection);
        },
        handleEdit(index, row) {
          console.log(index, row);
        },
        handleDelete(index, row) {
          console.log(index, row);
        },
        // 每页显示的条数
        handleSizeChange(val) {
          // 改变每页显示的条数
          this.pagesize = val;
          // 注意:在改变每页显示的条数时,要将页码显示到第一页
          this.currentPage = 1;
        },
        // 显示第几页
        handleCurrentChange(val) {
          // 改变默认的页数
          this.currentPage = val;
        }
      },
      created: function() {
        this.tableData=tablelist.tableData
        console.log(this.tableData)
        this.total = this.tableData.length;
        console.log(this.total)
      }
  • 相关阅读:
    正则如何匹配div下的所有<li>标签?
    日历
    生成一定数量的不重复随机数
    PHP微信红包的算法实现探讨
    Flask 快速使用 —— (1)
    Django rest framework(8)---- 视图和渲染器
    Django 组件之 ----- content-type
    Django rest framework(7)----分页
    Django rest framework(6)----序列化(2)
    Django rest framework(5)----解析器
  • 原文地址:https://www.cnblogs.com/caoxen/p/10649935.html
Copyright © 2011-2022 走看看