Vue.js UI框架 - element

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