element-ui试用手记
栏目: JavaScript · 发布时间: 6年前
内容简介：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试用手记》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
赛博空间的奥德赛
(荷兰)约斯·德·穆尔 (Jos de Mul) / 麦永雄 / 广西师范大学出版社 / 2007-2 / 38.00元
本书揭示了数码信息时代的电子传媒与赛博空间为人类历史的发展提供的新的可能性。本书第一部分“通向未来的高速公路”，涉及无线想象、政治技术和极权主义在赛博空间的消解等题旨；第二部分“赛博空间的想象” ，讨论空间文学探索简史、电影和文化的数码化；第三部分”可能的世界” ，关涉世界观的信息化、数码复制时代的世界、数码此在等层面；第四、五部分探讨主页时代的身份、虚拟人类学、虚拟多神论、赛博空间的进化、超人文......一起来看看 《赛博空间的奥德赛》 这本书的介绍吧!
