Vue.js UI框架 - element

关注

原创最新推荐文章于 2026-03-30 10:06:32 发布 3.4w 阅读 AI 写同款· GEO 优化 ›

Vue.js前端框架教程6：Element UI框架组件创建了一个按钮，并绑定了一个点击事件。的强大之处在于其丰富的组件库和灵活的配置，可以帮助开发者快速构建出功能丰富、界面美观的。项目中，你可以立即开始使用它的组件来构建页面。框架，它提供了一套丰富的组件和工具，帮助开发者快速构建高质量的前端界面。就被添加到你的项目中了，你可以开始使用它提供的各种组件来构建应用。提供了多种类型的组件，包括布局组件、表单组件和数据展示组件等。表单组件是用于创建各种表单的控件集合，包括。布局组件用于构建页面的基本结构，包括。'欢迎学习 ElementUI! 阅读详情

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.youkuaiyun.com/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>