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)
      }
  • 相关阅读:
    《Python入门》学习笔记(2)
    《Python入门》学习笔记(1)
    《基于华为云DevCloud的托马斯商城》的学习笔记
    国内外云测平台
    优秀程序员&优秀架构师需要具备的能力和特质
    jira插件-xray、zephyr、synapseRT测试管理试用反馈
    Json文件转换为Excel文件!涉及读文件,时间戳转化,写文档
    客户端与服务端通信的交互模式
    traceroute和tracert区别
    mysql: navicat for mysql 执行快捷键
  • 原文地址:https://www.cnblogs.com/caoxen/p/10649935.html
Copyright © 2011-2022 走看看