ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> web前端 >> element-ui试用手记

element-ui试用手记

来源:网络整理     时间:2018-10-31     关键词:

本篇文章主要介绍了" element-ui试用手记",主要涉及到方面的内容,对于web前端感兴趣的同学可以参考一下: element-ui、iviewui都以vue.js为基础,以前用过iviewui,感觉很好上手javascript代码套路基本是一样的,模板标签名称有所区别、...

element-ui、iviewui都以vue.js为基础,以前用过iviewui,感觉很好上手javascript代码套路基本是一样的,模板标签名称有所区别、具体的设计理念也有点区别。
  简单试了一下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文件,放在前端使用的。放在下面做为附件,如果需要,自行取用。

以上就介绍了 element-ui试用手记,包括了方面的内容,希望对web前端有兴趣的朋友有所帮助。

本文网址链接:http://www.codes51.com/article/detail_4595468.html

相关图片

相关文章