Element UI——一套基于 Vue 2.0 的桌面端组件库 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
已注册用户请 &
爱意满满的作品展示区。
Element UI——一套基于 Vue 2.0 的桌面端组件库
11:22:57 +08:00 · 78522 次点击
仓库地址：
文档地址：
Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，它面向企业级的后台应用，能够帮助你快速地搭建网站，极大地减少研发的人力与时间成本。在这个月的 NingJS 上我们开源了这个项目，当时它的文档还没有准备好。今天，经过两周多的完善， Element UI 的文档正式上线啦！目前它处于 rc 阶段，正式版将于 Vue 2.0 发布后第一时间跟进。
欢迎大家来使用和完善，一起把它做成 Vue 最好的企业级组件库。
60 回复 &| &直到
10:16:43 +08:00
& & 11:40:41 +08:00
挺清爽的。。
& & 11:47:11 +08:00
桌面？移动？
& & 11:49:55 +08:00
刚需, 已 star
& & 11:50:34 +08:00
& & 11:59:21 +08:00
相当不错 很爽
& & 12:01:16 +08:00
文档发晚了，已经用了 2 周时间把 ant.design 和 rails 结合起来了
& & 12:03:31 +08:00
& & 12:10:16 +08:00
使用了 ant.desgin
但是还是喜欢 Vue
& & 12:11:41 +08:00
这页面很赞啊
& & 12:22:15 +08:00
看上去质量不错。
& & 12:25:48 +08:00
咦，节点选错了，@Lived 求转移到分享创造节点
& & 12:27:37 +08:00
咦，@ 错了，@Livid 求转移到分享创造节点
& & 12:33:49 +08:00
官网首页推轮子的女性屁股画的不合理
& & 12:44:06 +08:00 via Android
这不是 vue 和 bootstrap uikit 结合体么，分离用不是一样的么，有什么优势
& & 12:48:28 +08:00
@ 与淹没 3/4 的胸搭配起来，其实是合理的，仔细看看
@ 移动端看
@ 你这个说法。。。人家设计师辛辛苦苦设计的一套 UI 风格，你说是 bootstrap
& & & 12:48:40 +08:00
@ 好的，已经移动。
& & 12:54:33 +08:00 via Android
@ 我只是举个例子，问问优势在哪儿
& & 12:58:29 +08:00
@ 如果撇开 UI 的话，组件去除了 jquery 依赖、去除了 bootstrap.js 的依赖
可以对标这个项目：
加上 UI 谈，可能 bootstrap 3.0 的设计风格已经 out 了
& & 13:07:20 +08:00
好赞，已 star
& & 13:09:56 +08:00
看了下感觉东西很全，完成度很高
美中不足的是：细节呈现出的质感不够好，配色略显单薄
期待后续可以继续完善
& & 13:33:16 +08:00
第一印象很不错！
& & 13:41:19 +08:00
@ 求浏览器兼容范围
& & 13:56:32 +08:00
& & 14:00:55 +08:00
nice 已 start 总把 ElemeFE 看成 Element
& & 14:01:02 +08:00
挺不错的，喜欢多选框（直角就更好了）、 Slider 滑块、 Message 消息提示，感觉有点 bootstrap 的影子，圆角矩形+边框，留白有点大，起始感觉没有边框比较好，比如说 card 。
& & 14:09:56 +08:00
& & 14:36:32 +08:00
) 算是 bug 不？
& & 14:41:34 +08:00
& & 14:48:30 +08:00
和 Ant Design 挺像的
& & 15:03:58 +08:00
满分满分，送上我的 star
& & 15:20:05 +08:00
感谢 LZ 的分享。
& & 15:24:57 +08:00
创造力满满
& & 16:33:15 +08:00
Switch 开关的圆点没垂直居中，另外下面的字竟然被圆点挡住了
& & 16:37:15 +08:00
早点发好了，在用 semantic ui
& & 17:13:11 +08:00
有点像啊,ant 是 react 的.这个是 vue 的
& & 17:47:07 +08:00
已 star ，不错，不过现在还在用 1.0
& & 18:13:31 +08:00
很漂亮啊！已 star
& & 18:14:53 +08:00
& & 18:58:38 +08:00 via iPhone
& & 19:08:17 +08:00 via Android
我就想问这种组建化的 ui 库(例如还有 vux)，到底怎么具体自定义某个按钮或者组建的 css ? (不是全部)
& & 19:15:57 +08:00 via iPhone
很厉害，已收藏
& & 19:49:38 +08:00
& & 20:03:43 +08:00
好看，不错！
& & 21:06:06 +08:00
有一些新的组件，图片上传，评分啥的，真的不错，赞！
& & 21:28:37 +08:00 via iPad
挺好看，期待更为复杂的组件支持。
& & 22:31:19 +08:00
太 6 了 明天虐死前端
& & 01:31:07 +08:00
很赞，不知道库的大小如何， semantic-ui 不定制的话就很大
& & 04:16:00 +08:00 via iPhone
能有 react 版本吗？总觉得 antd 非常不好看
& & 08:38:12 +08:00
@ 全部加载（所有组件 css 和 js ）且 gzip 后一共是 80Kb+
& & 08:43:16 +08:00
目前从文档演示来看 bug 还蛮多的。老早以前在 github 上就发现了这个项目，一直没有看到文档，现在终于有了，恭喜。
比 antd 清爽，很不错的一个 UI 框架！
& & 09:05:43 +08:00
table 不错，企业开发里， crud 用这个很多。
其他的组件中规中矩，也算够用了。
& & 09:13:29 +08:00
作为桌面端 ui ， datepicker 效果非常差
& & 20:20:31 +08:00
& & 23:06:27 +08:00
@ 效果差具体是指？
& & 09:10:34 +08:00
@ 就不要滚动了，直接键盘输入算了
& & 10:03:29 +08:00
强烈支持一个！！！
& &361 天前
我想说为毛本地项目和你们页面里的效果不一样。。
& &273 天前
这个是不错！不过移动端的话， vue-carbon 也不错，大家可以看下
& &144 天前
& &129 天前
刚开始用,有没有人遇到 dialog 组件不弹的问题?
& · & 2238 人在线 & 最高记录 3541 & · &
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.0 · 76ms · UTC 04:47 · PVG 12:47 · LAX 20:47 · JFK 23:47? Do have faith in what you're doing.git： （记得点star哈，感谢~）
最近学习vue2.0和elementUI的使用，在各种文档的帮助下，尝试编写了一个后台管理平台。
目前数据采用mock.js模拟，比较简略。后续会进行细化并增加登录、表单等功能。
依赖项版本
"vue": "^2.1.0",
"vue-router": "^2.1.3", // vue.js官方路由
"axios": "^0.16.1",
// 官方已不再推荐使用vue-resource，如今推荐axios。
"element-ui": "^1.2.3", // 样式库
"mockjs": "^1.0.1-beta3", //模拟数据使用
具体请参考/reg21st/vue_ui_test/blob/master/package.json
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
首页index.html
&!DOCTYPE html&
&meta charset="utf-8"&
&title&后台管理系统&/title&
&meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"&
&link rel="stylesheet" href="static/css/reset.css"&
&div id="app"&
&router-view&&/router-view&
&!-- built files will be auto injected --&
&template&
&el-row class="container" style="height: 100%"&
&v-header :user="user"&&/v-header&
&el-col :span="24" class="main"&
&el-menu :default-active="$route.path" class="mar-l el-menu-vertical-demo el-col el-col-3" light router&
&template v-for="(item,index) in $router.options.routes[0].children" v-if="!item.hidden"&
&el-menu-item :index="item.path" &&i class="fa" :class="item.class"&&/i&{{item.name}}&/el-menu-item&
&/template&
&/el-menu&
&section class="contentCon"&
&el-col :span="21" :offset="3" class="content-wrapper"&
&transition&
&router-view&&/router-view&
&/transition&
&/section&
&/template&
import header from './components/header/header.vue';
const ERR_OK = "000";
export default {
created () {
this.$http.get('/api/user').then((response) =& {
response = response.
if (response.code === ERR_OK) {
this.user = response.
beforeCreate () {
if (this.$route.path === '/') {
this.$router.push({path: '/index'})
components: {
'v-header': header
前期采用vue-resource，后期改为axios，方便修改，因此写了：Vue.prototype.$http =
import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
import App from './App';
import Index from './components/index/index';
import Table from './components/table/table';
import Form from './components/form/form';
import other from './components/other/other';
import 'font-awesome/css/font-awesome.min.css';
import Mock from './mock/mock';
Mock.mockData();
Vue.use(VueRouter);// 安装路由功能
/* eslint-disable no-new */
Vue.use(VueRouter);
Vue.prototype.$http =
Vue.use(ElementUI);
let routes = [
path: '/',
component: App,
children: [
{path: '/index', component: Index, name: 'index', class: 'fa-line-chart'},
{path: '/table', component: Table, name: 'table', class: 'fa-table'},
{path: '/form', component: Form, name: 'form', class: 'fa-newspaper-o'},
{path: '/other', component: other, name: 'other', class: 'fa-plug'}
let router = new VueRouter({
'linkActiveClass': 'active',
let app = new Vue({
}).$mount('#app');
git： （记得点star哈，感谢~）
阅读(...) 评论()Element UI 一套 Vue 2.0 组件库，文档上线！原文链接：相关热门文章<div class="like-count align-center" data-v-1b7后使用快捷导航没有帐号？
查看: 12|回复: 0
基于Vue2.0+ElementUI实现表格翻页功能的方法（教程）
主题帖子积分
发表于 前天&14:31
Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，它面向企业级的后台应用，能够帮助你快速地搭建网站，极大地减少研发的人力与时间成本。这篇文章主要介绍了Vue2.0+ElementUI实现表格翻页功能,需要的朋友可以参考下
Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，它面向企业级的后台应用，能够帮助你快速地搭建网站，极大地减少研发的人力与时间成本。在这个月的 NingJS 上我们开源了这个项目，当时它的文档还没有准备好。今天，经过两周多的完善， Element UI 的文档正式上线啦！目前它处于 rc 阶段，正式版将于 Vue 2.0 发布后第一时间跟进。 欢迎大家来使用和完善，一起把它做成 Vue 最好的企业级组件库。
ElementUI的表格要求的数据类型为字典数组。我使用了python3写后端，那么从数据库取数据时添加一行cursorclass=pymysql.cursors.DictCursor即可。取出后我将其存入redis数据库方便之后取用。取用时使用eval()函数再传到前端即可。
前端放置Pagination 分页器，我这里直接采用了完整功能的分页器。
&el-pagination
&&@size-change=&handleSizeChange&
&&@current-change=&handleCurrentChange&
&&:current-page=&currentPage&
&&:page-sizes=&[10, 20, 50, 100]&
&&:page-size=&pagesize&
&&layout=&total, sizes, prev, pager, next, jumper&
&&:total=&data.length&&
&/el-pagination&
其中：handleSizeChange为pagesize发生改变时的相应函数，handleCurrentChange为currentPage发生改变时的相应函数。
page-sizes为所有可选择的page-size。可以自己更改其中的数字。
layout为附带的功能，一般不用动它。
total为总数据数。由于是字典数组，直接使用length方法即可得到总数据数。
&&return {
& & data: [],
& & currentPage:1,
& & pagesize:20,
初始页currentPage、初始每页数据数pagesize和数据data
methods: {
&&handleSizeChange: function (size) {
& & this.pagesize =
&&handleCurrentChange: function(currentPage){
& & this.currentPage = currentP
上面的两个响应函数，很好理解。
&&:data=&data.slice((currentPage-1)*pagesize,currentPage*pagesize)&
&&style=&width: 100%&&
el-table标签。通过计算很容易得到，要使当页显示分页后的对应数据，其下标应为(当前页-1)*每页数据数&&到&&当前页*每页数据数。使用slice方法进行取用。
stripe为带斑马纹表格。
&el-table-column
&&prop=&id&
&&label=&序号&
&&align=&center&&
&/el-table-column&
column标签。可放多个，对每列的控制。label为该列名称，显示在第一行。prop为data中的某key的名称。
以上所述是小编给大家介绍的Vue2.0+ElementUI实现表格翻页，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站的支持！
本帖子中包含更多资源
才可以下载或查看，没有帐号？Vue 2.0开源组件库Element 1.2.7下载|Vue 2.0开源组件库Element 1.2.7下载__飞翔下载
单机游戏下载单机游戏下载基地
当前位置： →
→ Vue 2.0开源组件库Element 1.2.7
Vue 2.0开源组件库Element 1.2.7 是一套为开发者、设计师和产品经理准备的基于Vue 2.0的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。组件特性一致性 Consistency与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。反馈 Feedback控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。效率 Efficiency简化流程：设计简洁直观的操作流程；清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。可控 Controllability用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。Element 1.2.7 版本更新内容修复 Select 不兼容 Vue 2.2.6 的问题优化 Table 的 Tooltip 渲染性能新增 Table&tooltip-effect&属性Element用法npm&install&element-ui@next示例代码import&Vue&from&&#39;vue&#39;import&Element&from&&#39;element-ui&#39;import&&#39;element-ui/lib/theme-default/index.css&#39;;
Vue.use(Element)//&orimport&Select&from&&#39;element-ui/lib/select&#39;;import&Select&from&&#39;element-ui/lib/theme-default/select.css&#39;;import&Button&from&&#39;element-ui/lib/button&#39;;import&Button&from&&#39;element-ui/lib/theme-default/button.css&#39;;
ponent(Select.name,&ElSelect)
ponent(Button.name,&ElButton)&
安卓官方手机版
IOS官方手机版
Vue 2.0开源组件库Element 1.2.7
html5开发工具
(11) 随着现如今互联网行业的飞速发展，前端开发语言html5凭借快速,安全,响应式,互动和美丽的特点也越来越多的受到web开发人员的青睐。html5开发工具哪个好？下面就给大家推荐一些比较好用的html5开发工具，包括hbuilder、
hbuilder是DCloud推出的一款支持
dreamweaver 是世界上最好用的网
notepad++中文版是写程序朋友分享
&&Jad是一个Java的一个
很多人都以为eclipse就是myeclip
Sublime Text 很赞的代码编辑器，
本类软件分类
装机必备软件