element-ui试用手记

wallimn

浏览: 5161314 次
性别:
来自: 北京

最近访客更多访客>>

java-007

xckouy

lengyun3566

zxjun8771

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JAVA、WEB开发

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文件，放在前端使用的。放在下面做为附件，如果需要，自行取用。

element-ui.v2.4.9.rar (828.2 KB)
描述: element-ui源码
下载次数: 4

分享到：

vue-resource拦截器实现token发送及检验自 ... | iviewui中表格控件中render的使用示例

2018-10-29 20:25
浏览 1747
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

element-ui试用手记

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

element-ui试用手记

评论

发表评论

相关推荐

gradle编译错误：Could not find method compile() for arguments

netty心跳检查之UDP篇

解决tomcat部署两个SpringBoot应用提示InstanceAlreadyExistsException

Eclipse配置MyBatis代码自动化功能

vue.js中使用qrcode生成二维码

MySQL插入数据报错： Incorrect string value: '\xFD\xDE'

vue自定义组件并双向绑定属性

vue-router简单示例

“联通充值系统繁忙”轻松应对

electron.js数据库应用---导航菜单(element-ui+mysql)

electron.js数据库应用---入门(mysql+element-ui)

SpringMVC 在controller层中注入成员变量request，是否线程安全

VueJS 组件参数名命名与组件属性转化

vue-resource拦截器实现token发送及检验自动化

iviewui中表格控件中render的使用示例

Tomcat错误“Alias name tomcat does not identify a key entry”解决

阿里云免费证书“fileauth.txt内容配置错误”解决

springboot2.0跨域配置

微信小程序使用code换openid的方法（JAVA、SpringBoot）

SpringBoot2.0启用https协议

最近访客更多访客>>