`

element-ui试用手记

element-ui 
阅读更多
　　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文件，放在前端使用的。放在下面做为附件，如果需要，自行取用。
分享到：
| iviewui中表格控件中render的使用示例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics