Vue.js UI框架 - element
来源:互联网 发布:剪辑音乐软件 编辑:程序博客网 时间:2024/06/05 08:00
Vue.js UI框架 - element
文档:http://element.eleme.io/#/zh-CN/component/installation
安装:
npm i element-ui -D
配置:
http://element.eleme.io/#/zh-CN/component/quickstart
引入:
import ElementUI from 'element-ui';import 'element-ui/lib/theme-default/index.css';Vue.use(ElementUI);
实践
1.专门建一个表格组件el-table.vue:
<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table></template><script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } }</script>
2.引入组件
import eltable from "./../components/el-table.vue";
3.配置路由
const routerConfig = new VueRouter({ routes: [ { path: '/', component: userlogin}, { path: '/news', component: newslist, name:"newslist"}, { path: '/news/:newsid', component: newsdetail, name:"newsdetail"}, { path: '/login', component: userlogin,name:"userlogin" }, { path: '/eltable', component: eltable,name:"eltable" } ]})
4.我们之前学过了Vuex的store
http://blog.csdn.net/github_26672553/article/details/53389988
所以我们来到NewsModule.js,把el-table.vue里的数据拷贝过来
import Vue from "vue";export default{ state:{ newslist:[], newsdetail:{}, newstable:[{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] },
这样el-table.vue需要修改访问数据的方式:
:data="this.$store.state.news.newstable"
浏览器访问:
5.table还有各种事件
http://element.eleme.io/#/zh-CN/component/table
我们拿cell-click
举例
<template> <el-table :data="this.$store.state.news.newstable" style="width: 100%" @cell-click="test" > <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table></template><script> export default { methods:{ test(){ alert("单元格点击事件"); } } }</script>
0 0
- Vue.js UI框架 - element
- Vue.js UI框架
- Vue.js UI框架
- Vue.js UI框架
- Vue.js UI框架
- Vue.js UI框架
- Vue.js UI框架
- element-ui+vue.js 简易留言板
- vue.js+element ui学习笔记
- vue.js+element-ui动态配置菜单
- Vue.js UI框架比较
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element
- 谈谈学习element UI + vue.js的感受
- 关于 Vue.js+Element-UI 日期控件 日期范围选择
- vue.js中使用mint-ui框架
- vue element-ui dialog组件
- vue+element-ui上传文件
- VueJs2.0入门--之后台管理系统(vue.js +vue-router+vuex+element-ui+axios)
- 关于androidStudio中使用ButterKnife8.4.0时点击事件显示为未使用
- matlab中的mat2cell及cellfun使用
- Windows 上搭建dryrun环境运行github上的Android程序
- CGAffineTransformMake(a,b,c,d,tx,ty) 矩阵
- LevelDB:Bloom源码精读——数据结构
- Vue.js UI框架 - element
- Java断言(assert)介绍及使用
- 安卓复习之旅—Java多线程同步
- C语言指针引用二维数组
- SDL_SoftStretch函数
- iOS UITableView之cellForRowAtIndexPath和indexpathForCell分别获取指定cell和indexpath
- 如何在laravel/lumen中集成支付宝支付
- IOS 自动布局Masonry简介
- MYSQL 提示Please DISCARD the tablespace before IMPORT