【Python100天学习笔记】Day29 UI框架-Element

UI框架 - Element

基于Vue 2.0的桌面端组件库，用于构造用户界面，支持响应式布局。

引入Element的CSS和JavaScript文件。

代码语言：javascript复制

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

一个简单的例子。

代码语言：javascript复制

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
            <el-button @click="visible = true">点我</el-button>
            <el-dialog :visible.sync="visible" title="Hello world">
                <p>开始使用Element吧</p>
            </el-dialog>
            </div>
    </body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                visible: false,
            }
        })
    </script>
</html>

使用组件。

代码语言：javascript复制

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
            <el-table :data="tableData" stripe 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>
        </div>
    </body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                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>
</html>

报表框架 - ECharts

百度出品的开源可视化库，常用于生成各种类型的报表。

javascript element ui 报表组件库

0 人点赞