ViewUI在vue中如何表格分页

$ npm install view-design --save

//mian.js中引入
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';

Vue.use(ViewUI);


//vue模板中引用
        <Table  border :columns="columns" :data="nowData" stripe ref="selection" >
<!--          <template  slot-scope="{ row }" slot="toolName">-->
<!--            <span>{{ row.TOOL_NAME }}</span>-->
<!--          </template>-->
<!--          <template  slot-scope="{ row }" slot="toolModel">-->
<!--            <span>{{ row.TOOL_MODEL }}</span>-->
<!--          </template>-->
<!--          <template  slot-scope="{ row }" slot="count">-->
<!--            <span>{{ row.COUNT }}</span>-->
<!--          </template>-->
        </Table>
        <Page :total="dataCount" :page-size="pageSize" @on-change="changepage" @on-page-size-change="_nowPageSize"
show-total  style="position: relative;top: 10px;"/>


		//datd数据中定义
		columns: [
          {
            title: '工具名称',
            key: 'toolName',
            align:'center'
          },
          {
            title: '型号',
            key: 'toolModel',
            align:'center'
          },
          {
            title: '合计',
            key: 'count',
            align:'center'
          }],  
        //分页
        pageSize: 5,//每页显示多少条
        dataCount: 0,//总条数
        pageCurrent: 1,//当前页
        nowData:[]

		//初始化的时候执行判断需不需要分页
	   //分页显示所有数据总数
      this.dataCount = dateList.length;
      //循环展示页面刚加载时需要的数据条数
      this.nowData = [];
      if(this.dataCount>this.pageSize){
        for (let i = 0; i < this.pageSize; i++) {
          this.nowData.push(dateList[i]);
        }
      }else {
        this.nowData = dateList
      }

//页数改变的时候触发的函数,切换页码修改显示数据
	changepage(index) {
        //需要显示开始数据的index,(因为数据是从0开始的,页码是从1开始的,需要-1)
        let _start = (index - 1) * this.pageSize;
        //需要显示结束数据的index
        let _end = index * this.pageSize;
        //截取需要显示的数据
        this.nowData = dateList.slice(_start, _end);
        //储存当前页
        this.pageCurrent = index;
      },
      //每页显示的数据条数
      _nowPageSize(index) {
        //实时获取当前需要显示的条数
        this.pageSize = index;
      },
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值