加拿大28

  • <tr id='0o95d'><strong id='0o95d'></strong><small id='0o95d'></small><button id='0o95d'></button><li id='0o95d'><noscript id='0o95d'><big id='0o95d'></big><dt id='0o95d'></dt></noscript></li></tr><ol id='0o95d'><option id='0o95d'><table id='0o95d'><blockquote id='0o95d'><tbody id='0o95d'></tbody></blockquote></table></option></ol><u id='0o95d'></u><kbd id='0o95d'><kbd id='0o95d'></kbd></kbd>

    <code id='0o95d'><strong id='0o95d'></strong></code>

    <fieldset id='0o95d'></fieldset>
          <span id='0o95d'></span>

              <ins id='0o95d'></ins>
              <acronym id='0o95d'><em id='0o95d'></em><td id='0o95d'><div id='0o95d'></div></td></acronym><address id='0o95d'><big id='0o95d'><big id='0o95d'></big><legend id='0o95d'></legend></big></address>

              <i id='0o95d'><div id='0o95d'><ins id='0o95d'></ins></div></i>
              <i id='0o95d'></i>
            1. <dl id='0o95d'></dl>
              1. 您好,欢迎来到[码蚁之家]阅读室  笑话大全  编程问答  问答大全  移民之家  娱乐之家  范文之家  源码下载  电子书籍  软件下载  专题
                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://bayitaku.com/article/detail_4595468.html

                相关图片

                相关文章