$ 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;
},
ViewUI在vue中如何表格分页
最新推荐文章于 2024-04-16 16:03:40 发布