简单试了一下table及pagination组件的使用。
一、网页代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" c c href="../res/lib/element-ui.v2.4.9/theme-chalk/index.css">
<style type="text/css">
.center{
text-align:center;
}
</style>
</head>
<body>
<div>
<h3>统计</h3>
<div>
统计时间：<el-date-picker v-model="form.payTime1" type="date" placeholder="起时时间"></el-date-picker>-<el-date-picker v-model="form.payTime2" type="date" placeholder="结束时间"></el-date-picker><br>
<el-button icon="el-icon-search" @click="loadTableData" type="primary">统计</el-button>
</div>
<el-table :data="tableData.items" border stripe>
<el-table-column type="index" width="50" label="序号"></el-table-column>
<el-table-column label="时间">
<template slot-scope="scope">
{{ scope.row.payYear }}-{{ scope.row.payMonth }}-{{ scope.row.payDay }}
</template>
</el-table-column>
<el-table-column prop="agentName" label="代理商名称" width="120"></el-table-column>
<el-table-column label="总收入(元)">
<template slot-scope="scope">{{ scope.row.payMoney/100 }}</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
@current-change="gotoPage"
:current-page="tableData.page"
:page-size="tableData.limit"
:total="tableData.totalCount"
>
</el-pagination>
</div>
<script type="text/javascript" src="../res/lib/vue.js"></script>
<script type="text/javascript" src="../res/lib/vue-resource.js"></script>
<!-- 引入组件库 -->
<script src="../res/lib/element-ui.v2.4.9/index.js"></script>
<script type="text/javascript">
// Vue实例化
var doit = new Vue({
el:'#app',
data: {
tableData: [],
statData:{},
form:{
limit:50,
page:1,
statType:"day",
payTime1:'2018-10-01',
payTime2:null
}
},
created: function(){
this.loadTableData();
},
methods: {
loadTableData: function(){
var self = this;
self.$http.post("json.js",self.form).then(function(res){
console.log(res);
self.tableData = res.data.list;
self.statData = res.data.stat;
});
},
gotoPage: function(page){
this.form.page=page;
this.loadTableData();
}
}
});
</script>
</body>
</html>
二、JSON数据如下：
{
"slider": [
1
],
"hasPrePage": false,
"startRow": 1,
"offset": 0,
"lastPage": true,
"prePage": 1,
"hasNextPage": false,
"nextPage": 1,
"endRow": 1,
"totalCount": 1,
"firstPage": true,
"totalPages": 1,
"limit": 10,
"page": 1,
"items": [
{
"pileId": 1,
"payYear": 2018,
"payMonth": 10,
"payDay": 19,
"payMoney": 3,
"payWeek": null,
"chargeUserCount": 1,
"chargeMinutes": 6,
"chargeCount": 1,
"pileBarcode": null,
"pileName": "测试",
"pilePlugs": 8,
"isHighPower": null,
"stationId": 1,
"stationName": "1",
"agentId": 3,
"agentCode": null,
"agentName": "8"
}
]
}感觉element-ui易用性要好一些，表格输出一些自定义内容要方便一些，组件功能要强一些。其它没有仔细试，只是简单测试的感觉。
element-ui的HTML页面直接可用的源码不太好下载，我是下载了node.js，然后用npm下载的，从其中找出js及css文件，放在前端使用的。放在下面做为附件，如果需要，自行取用。