element-ui试用手记
栏目: JavaScript · 发布时间: 5年前
内容简介：element-ui、iviewui都以vue.js为基础，以前用过iviewui，感觉很好上手javascript代码套路基本是一样的，模板标签名称有所区别、具体的设计理念也有点区别。简单试了一下table及pagination组件的使用。一、网页代码如下：
element-ui、iviewui都以vue.js为基础，以前用过iviewui，感觉很好上手javascript代码套路基本是一样的，模板标签名称有所区别、具体的设计理念也有点区别。
简单试了一下table及pagination组件的使用。
一、网页代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>统计</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="../res/lib/element-ui.v2.4.9/theme-chalk/index.css">
<style type="text/css">
.center{
text-align:center;
}
</style>
</head>
<body class="main">
<div id="app">
<h3 class="center">统计</h3>
<div style="text-align:right">
统计时间：<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 style="width: 100%">
<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"
style="text-align:right">
</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文件，放在前端使用的。放在下面做为附件，如果需要，自行取用。
以上所述就是小编给大家介绍的《element-ui试用手记》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
