Vue.js UI框架

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32