Java 阶段四 Day05 ElementUI

最新推荐文章于 2024-08-08 14:30:51 发布
最新推荐文章于 2024-08-08 14:30:51 发布
阅读量86 收藏
点赞数
文章标签： java elementui 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44693429/article/details/133338545
版权

Java 阶段四 Day05 ElementUI

ElementUI

ElementUI 是一个流行的开源 UI 框架，用于构建 Web 应用程序。它专门为 Vue.js 这个用于构建用户界面的渐进式 JavaScript 框架设计。ElementUI 提供了一组可自定义且响应式的 UI 组件，可以轻松集成到 Vue.js 项目中。

ElementUI 的一些主要特点包括：

  1. 丰富的组件集合：ElementUI 提供了广泛的 UI 组件，包括按钮、表单、表格、弹出框、菜单等等。

  2. 易于使用：这些组件易于使用和定制，可以大大加速 Web 应用程序的开发过程。

  3. 响应式设计：ElementUI 的组件具有响应式设计，可以在不同设备和屏幕尺寸上自适应布局。

  4. 国际化支持：它支持多种语言，可以轻松地将你的应用本地化到不同的语言环境。

  5. 主题定制：你可以根据项目需求轻松定制 ElementUI 的外观和样式，以满足你的设计要求。

  6. 社区支持：ElementUI 拥有庞大的社区和文档资源，这使得学习和使用该框架变得更加容易。

官方文档

组件

开发指南

  • npm安装
    推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

    npm i element-ui -S

  • CDN

    • 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
      <!-- 引入样式 -->
<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>

  • Hello World

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
            <el-button @click="visible = true">Button</el-button>
            <el-dialog :visible.sync="visible" title="Hello world">
                <p>Try Element</p>
            </el-dialog>
        </div>
    </body>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: function() {
                return { visible: false }
            }
        })
    </script>
</html>

布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
        <style>
            .c1{
                border: 1px solid red;
                border-radius: 5px;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--总共24分栏, 通过span设置当前列占多少分栏-->
            <el-row>
                <el-col span="12"><div class="c1">111</div></el-col>
                <el-col span="12"><div class="c1">2222</div></el-col>
            </el-row>
            <el-row>
                <el-col span="6"><div class="c1"></div></el-col>
                <el-col span="6"><div class="c1"></div></el-col>
                <el-col span="6"><div class="c1"></div></el-col>
                <el-col span="6"><div class="c1"></div></el-col>
            </el-row>
            <el-row>
                <el-col span="4"><div class="c1"></div></el-col>
                <el-col span="4"><div class="c1"></div></el-col>
                <el-col span="4"><div class="c1"></div></el-col>
                <el-col span="4"><div class="c1"></div></el-col>
                <el-col span="4"><div class="c1"></div></el-col>
                <el-col span="4"><div class="c1"></div></el-col>
            </el-row>
            <!--带有居中效果的2:1两部分-->
            <div style="width: 1200px;margin: 0 auto">
                <el-row gutter="20">
                    <el-col span="16"><div class="c1"></div></el-col>
                    <el-col span="8"><div class="c1"></div></el-col>
                </el-row>
            </div>
            <!--练习1:     1:3:1:1 居中,间距为10个像素-->
            <div style="width: 1200px;margin: 0 auto">
                <el-row gutter="10">
                    <el-col span="4"><div class="c1"></div></el-col>
                    <el-col span="12"><div class="c1"></div></el-col>
                    <el-col span="4"><div class="c1"></div></el-col>
                    <el-col span="4"><div class="c1"></div></el-col>
                </el-row>
            </div>
            <!--练习2:       1:2:3 居中 间距20-->
            <div style="width: 1200px;margin: 0 auto">
                <el-row gutter="20">
                    <el-col span="4"><div class="c1"></div></el-col>
                    <el-col span="8"><div class="c1"></div></el-col>
                    <el-col span="12"><div class="c1"></div></el-col>
                </el-row>
            </div>
            <!--练习3:       8等分 居中 间距5  用v-for  -->
            <div style="width: 1200px;margin: 0 auto">
                <el-row gutter="5">
                    <el-col span="3" v-for="item in 8"><div class="c1">{{item}}</div></el-col>
                </el-row>
            </div>
            <h3>列偏移</h3>
            <el-row>
                <el-col offset="4" span="20"><div class="c1"></div></el-col>
            </el-row>
        </div>
    </body>
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <script>
        let v = new Vue({
            el: '#app',
            data: function () {
                return {

                }
            },
            methods: {

            }
        })
    </script>
</html>

布局容器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
        <style>
            .el-header{background-color: red;}
            .el-footer{background-color: green}
            .el-main{height: 300px;background-color: blue;}

        </style>
    </head>
    <body>
        <div id="app">
            <el-container>
                <el-header>Header</el-header>
                <el-main>Main</el-main>
                <el-footer>Footer</el-footer>
            </el-container>
            <h1>先上下,再左右</h1>
            <el-container>
                <el-header>Header</el-header>
                <el-container>
                    <el-aside width="200px">Aside</el-aside>
                    <el-main>Main</el-main>
                </el-container>
            </el-container>

            <el-row gutter="10">
                <el-col span="8" v-for="item in 3">
                    <el-card><h1>张三</h1></el-card>
                </el-col>
            </el-row>

        </div>
    </body>
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <script>
        let v = new Vue({
            el: '#app',
            data: function () {
                return {

                }
            },
            methods: {

            }
        })
    </script>
</html>

按钮

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">

            <el-row>
                <el-button>默认按钮</el-button>
                <el-button type="primary">主要按钮</el-button>
                <el-button type="success">成功按钮</el-button>
                <el-button type="info">信息按钮</el-button>
                <el-button type="warning">警告按钮</el-button>
                <el-button type="danger">危险按钮</el-button>
            </el-row>

            <el-row>
                <el-button plain>朴素按钮</el-button>
                <el-button type="primary" plain>主要按钮</el-button>
                <el-button type="success" plain>成功按钮</el-button>
                <el-button type="info" plain>信息按钮</el-button>
                <el-button type="warning" plain>警告按钮</el-button>
                <el-button type="danger" plain>危险按钮</el-button>
            </el-row>

            <el-row>
                <el-button round>圆角按钮</el-button>
                <el-button type="primary" round>主要按钮</el-button>
                <el-button type="success" round>成功按钮</el-button>
                <el-button type="info" round>信息按钮</el-button>
                <el-button type="warning" round>警告按钮</el-button>
                <el-button type="danger" round>危险按钮</el-button>
            </el-row>

            <el-row>
                <el-button icon="el-icon-search" circle></el-button>
                <el-button type="primary" icon="el-icon-edit" circle></el-button>
                <el-button type="success" icon="el-icon-check" circle></el-button>
                <el-button type="info" icon="el-icon-message" circle></el-button>
                <el-button type="warning" icon="el-icon-star-off" circle></el-button>
                <el-button type="danger" icon="el-icon-delete" circle></el-button>
            </el-row>
            <h3>自己的按钮</h3>
            <el-button type="success">成功</el-button>
            <el-button type="danger" plain>危险</el-button>
            <el-button type="warning" round>警告</el-button>
            <el-button type="success" circle icon="el-icon-delete"></el-button>
            <h3>不同尺寸按钮</h3>
            <el-button type="success">成功</el-button>
            <el-button type="success" size="medium">成功</el-button>
            <el-button type="success" size="small">成功</el-button>
            <el-button type="success" size="mini">成功</el-button>
            <h3>字体图标</h3>
            <i class="el-icon-edit">编辑</i>
            <i class="el-icon-share" style="font-size: 40px"></i>
            <i class="el-icon-delete" style="color: red"></i>
            <i class="el-icon-chicken"></i>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>

        </div>
    </body>
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <script>
        let v = new Vue({
            el: '#app',
            data: function () {
                return {

                }
            },
            methods: {

            }
        })
    </script>
</html>

分割线

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
            <template>
                <div>
                    <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
                    <el-divider></el-divider>
                    <hr>
                    <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
                </div>
            </template>
            <template>
                <div>
                    <span>头上一片晴天，心中一个想念</span>
                    <el-divider content-position="left">少年包青天</el-divider>
                    <span>饿了别叫妈, 叫饿了么</span>
                    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
                    <span>为了无法计算的价值</span>
                    <el-divider content-position="right">阿里云</el-divider>
                </div>
            </template>

            <template>
                <div>
                    <span>雨纷纷</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>旧故里</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>草木深</span>
                </div>
            </template>
        </div>
    </body>
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <script>
        let v = new Vue({
            el: '#app',
            data: function () {
                return {

                }
            },
            methods: {

            }
        })
    </script>
</html>

消息提示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
            <template>
                <el-button :plain="true" @click="open2">成功</el-button>
                <el-button :plain="true" @click="open3">警告</el-button>
                <el-button :plain="true" @click="open1">消息</el-button>
                <el-button :plain="true" @click="open4">错误</el-button>
            </template>
        </div>
    </body>
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <script>
        let v = new Vue({
            el: '#app',
            data: function () {
                return {

                }
            },
            methods: {
                open1() {
                    this.$message('这是一条消息提示');
                },
                open2() {
                    v.$message.success("成功消息");
                },

                open3() {
                    v.$message.warning("警告");
                },

                open4() {
                    this.$message.error('错了哦，这是一条错误消息');
                }
            }
        })
    </script>
</html>

下拉菜单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
        <style>
            .el-dropdown-link {
                cursor: pointer;
                color: #409EFF;
            }

            .el-icon-arrow-down {
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h1>{{info}}</h1>
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="黄金糕">黄金糕</el-dropdown-item>
                    <el-dropdown-item command="狮子头">狮子头</el-dropdown-item>
                    <el-dropdown-item command="螺蛳粉">螺蛳粉</el-dropdown-item>
                    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                    <el-dropdown-item command="蚵仔煎" divided>蚵仔煎</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </body>
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <script>
        let v = new Vue({
            el: '#app',
            data: function () {
                return {
                    info:""
                }
            },
            methods: {
                handleCommand(command) {
                    v.info = command;
                    this.$message('click on item ' + command);
                }
            }
        })
    </script>
</html>

选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
            <h3>{{value}}</h3>
            <template>
                <el-select v-model="value" placeholder="请选择">
                    <!--label设置显示的内容 value设置选中后得到的值-->
                    <el-option
                               v-for="item in options"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
                <hr>
                <h3>您选择的商品价值:{{price}}</h3>
                <el-select v-model="price" placeholder="请选择">
                    <!--label设置显示的内容 value设置选中后得到的值-->
                    <el-option
                               v-for="p in arr"
                               :label="p.title"
                               :value="p.price">
                    </el-option>
                </el-select>
            </template>
        </div>
    </body>
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <script>
        let v = new Vue({
            el: '#app',
            data: function () {
                return {
                    price:"",
                    arr:[{title:"麦克风",price:100},
                         {title:"鼠标",price:30},
                         {title:"键盘",price:50},
                         {title:"显示器",price:800}],
                    options: [{
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶'
                    }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    }, {
                        value: '选项4',
                        label: '龙须面'
                    }, {
                        value: '选项5',
                        label: '北京烤鸭'
                    }],
                    value: ''
                }
            },
            methods: {

            }
        })
    </script>
</html>

表格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
            <template>
                <el-table
                          :data="tableData"
                          style="width: 100%">
                    <!--prop=properties 设置这一列显示的数据来自于数组中对象的哪个属性-->
                    <el-table-column
                                     prop="date"
                                     label="日期"
                                     width="100">
                    </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>
                <hr>

                <el-table :data="arr" style="width: 100%">
                    <!--添加编号列-->
                    <el-table-column type="index" label="编号"></el-table-column>
                    <!--prop=properties 设置这一列显示的数据来自于数组中对象的哪个属性-->
                    <el-table-column prop="name" label="姓名" width="100">
                    </el-table-column>
                    <el-table-column prop="salary" label="工资" width="180">
                    </el-table-column>
                    <el-table-column prop="job" label="工作">
                    </el-table-column>
                    <!--添加自定义列开始-->
                    <el-table-column label="操作">
                        <!--scope对象里面装的是当前行所对应的一些信息
scope.$index得到当前行的下标
scope.row得到的是当前行对应的数组里面的对象
-->
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger"
                                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                    <!--添加自定义列结束-->

                </el-table>
            </template>
        </div>
    </body>
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <script>
        let v = new Vue({
            el: '#app',
            data: function () {
                return {
                    arr:[{name:"张三",salary:3000,job:"人事"},
                         {name:"李四",salary:4000,job:"销售"},
                         {name:"王五",salary:5000,job:"程序员"}],
                    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 弄'
                    }]
                }
            },
            methods: {
                handleDelete(i,emp){
                    v.arr.splice(i,1);//从数组中删除数据
                    v.$message.success("成功删除了"+emp.name);
                }
            }
        })
    </script>
</html>

走马灯

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
        <style>
            .el-carousel__item h3 {
                color: #475669;
                font-size: 14px;
                opacity: 0.75;
                line-height: 150px;
                margin: 0;
            }

            .el-carousel__item:nth-child(2n) {
                background-color: #99a9bf;
            }

            .el-carousel__item:nth-child(2n+1) {
                background-color: #d3dce6;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <template>
                <div class="block">
                    <span class="demonstration">默认 Hover 指示器触发</span>
                    <el-carousel height="150px">
                        <el-carousel-item v-for="item in 4">
                            <h3 class="small">{{ item }}</h3>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="block">
                    <span class="demonstration">Click 指示器触发</span>
                    <el-carousel trigger="click" height="150px">
                        <el-carousel-item v-for="item in 4" :key="item">
                            <h3 class="small">{{ item }}</h3>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </template>
            <h3>自己的走马灯</h3>
            <div style="width: 400px">
                <el-carousel height="150px">
                    <el-carousel-item>
                        <img src="b1.jpg" height="100%" width="100%">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="b2.jpg" height="100%" width="100%">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="b3.jpg" height="100%" width="100%">
                    </el-carousel-item>
                </el-carousel>
                <h3>数组走马灯</h3>
                <div style="width: 400px">
                    <el-carousel height="150px">
                        <el-carousel-item v-for="url in arr">
                            <img :src="url" width="100%" height="100%">
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>
    </body>
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <script>
        let v = new Vue({
            el: '#app',
            data: function () {
                return {
                    arr:["b1.jpg","b2.jpg","b3.jpg","b4.jpg"]
                }
            },
            methods: {

            }
        })
    </script>
</html>

导航栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
            <!--default-active设置默认选中的位置
mode="horizontal"用来设置横向显示,去掉mode默认为纵向显示-->
            <el-menu :default-active="activeIndex"
                     class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">处理中心</el-menu-item>
                <!--submenu子菜单-->
                <el-submenu index="2">
                    <!--设置子菜单标题-->
                    <template slot="title">我的工作台</template>
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                    <el-menu-item index="2-3">选项3</el-menu-item>
                    <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项1</el-menu-item>
                        <el-menu-item index="2-4-2">选项2</el-menu-item>
                        <el-menu-item index="2-4-3">选项3</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <!--disabled让当前的菜单项失效-->
                <el-menu-item index="3" disabled>消息中心</el-menu-item>
                <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
            </el-menu>


            <div class="line"></div>
            <el-menu
                     :default-active="activeIndex2"
                     class="el-menu-demo"
                     mode="horizontal"
                     @select="handleSelect"
                     background-color="#545c64"
                     text-color="#fff"
                     active-text-color="#ffd04b">
                <el-menu-item index="1">处理中心</el-menu-item>
                <el-submenu index="2">
                    <template slot="title">我的工作台</template>
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                    <el-menu-item index="2-3">选项3</el-menu-item>
                    <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项1</el-menu-item>
                        <el-menu-item index="2-4-2">选项2</el-menu-item>
                        <el-menu-item index="2-4-3">选项3</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-menu-item index="3" disabled>消息中心</el-menu-item>
                <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
            </el-menu>
            <h3>自己的导航菜单</h3>
            <el-menu mode="horizontal">
                <el-menu-item v-for="(item,i) in arr" :index="i+1">{{item}}</el-menu-item>
            </el-menu>
            <h4>侧边导航菜单</h4>
            <div style="width: 300px;background-color: #666">
                <el-menu
                         default-active="2"
                         class="el-menu-vertical-demo"
                         @open="handleOpen"
                         @close="handleClose">
                    <el-submenu index="1">
                        <template slot="title">我的工作台</template>

                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>导航一</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">分组一</template>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>
            </div>
        </div>
    </body>
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <script>
        let v = new Vue({
            el: '#app',
            data: function () {
                return {
                    activeIndex: '3',
                    activeIndex2: '1',
                    arr:["首页","直播课","线上课","脱产班","关于我们"]
                }
            },
            methods: {
                handleSelect(key, keyPath) {
                    console.log(key, keyPath);
                },
                handleOpen(key, keyPath) {
                    console.log(key, keyPath);
                },
                handleClose(key, keyPath) {
                    console.log(key, keyPath);
                }
            }
        })
    </script>
</html>

综合员工列表练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
            <input type="text" placeholder="姓名" v-model="emp.name">
            <input type="text" placeholder="工资" v-model="emp.salary">
            <input type="text" placeholder="工作" v-model="emp.job">
            <input type="button" value="添加" @click="add()">
            <h3>员工列表</h3>

            <el-table :data="arr">
                <el-table-column type="index" label="编号"></el-table-column>
                <el-table-column prop="name" label="名字"></el-table-column>
                <el-table-column prop="salary" label="工资"></el-table-column>
                <el-table-column prop="job" label="工作"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger"
                                   @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
    </body>
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <script>
        let v = new Vue({
            el: '#app',
            data: function () {
                return {
                    emp: {name: "", salary: "", job: ""},
                    arr: [{name: "张三", salary: 3000, job: "人事"},
                          {name: "李四", salary: 4000, job: "销售"},
                          {name: "王五", salary: 5000, job: "程序员"}]
                }
            },
            methods: {
                add() {
                    v.arr.push({name: v.emp.name, salary: v.emp.salary, job: v.emp.job});
                },
                handleDelete(i, emp) {
                    v.arr.splice(i, 1);
                    v.$message.success("成功删除了" + emp.name);
                }
            }
        })
    </script>
</html>
JAVA救救我
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uimaker多套配色版（EasyUI后台管理模板多种主题）
07-05
EasyUI的后台管理模板，有PSD和源码，包括多种颜色主题，橙色、浅蓝、红色、绿色、深灰、深蓝、黑色、蓝色，分享给使用EasyUI的朋友。
day05集合 java
06-11
day05集合 java
Element UI：测试开发最爱的前端组件库
程序员小杨哥的博客
04-10 2340
Element UI因其简洁高效的设计风格、丰富多样的组件和良好的响应式设计，而备受广大测试开发的青睐，已逐渐成为各类测试平台首选的组件库，赶快学起来吧！
吃透B端UI设计：工作台体验设计策略及展示
weixin_56979746的博客
07-06 666
了解之前的工作情况、当前的任务进度以及之后的工作安排等，从而达到提高效率的目的。在这个流量见顶的时代，互联网竞争越来越惨烈，各公司业务的渗透难度变高，对应B端的产品中， 工作台就是以展示与用户相关概要信息的页面。那作为优秀的交互设计师，如何进行B端的工作台设计呢？，怎么帮助用户提高工作效率并快速的进入工作的状态。，从而帮助大家拆解工作台的功能寻求设计机会点。然而业务种类的丰富及用户使用场景的越来越复杂。的业务种类越来越多，信息系统越来越繁杂，这时一个好的工作台设计变得更为重要，进行了常见工作台类型的分析。
IoToS-App 0.6.0 移动端业务实现 文档开源
qq_38745592的博客
07-31 61
本次更新主要适配移动端卡号查询、智能诊断、用量记录、批量业务办理、会话记录功能实现。 www.iotos.top 文档页面网站源代码已开源，感兴趣的可用于搭建简单文档网站等，vue、markdown、html 语法适配。 文档网站源码地址: https://gitee.com/chinaiot/iotos-docs
前端智能化在淘宝的2022实践总结
淘系技术
02-17 1904
过去十年是智能化蓬勃发展的十年，但未来十年会是智能化渗入各领域彻底改变我们生活和工作的十年。阿里前端智能化方向小组历经 4 年的实践和演变，在前端融入业务技术团队和终端融合的背景之下，前端智能化小组在2022年更多以优化拓展基础业务工具、落地服务业务为主。本篇重点介绍业务工具的核心进展，以及在大促期间的应用落地。D2C核心进展D2C(DesigntoCode)对外的服务在imgcook....
Java学习三阶段-Day15
奔跑的小猫
07-12 77
1.商品分类业务功能 2.商品列表展现
Java阶段三Day05
今天你学Java了吗
05-26 774
今天是学习Java阶段三的第五天，开始学习ElementUI的一些知识，并进行了相关练习，本文展示的是具体的练习项，如想学习相关知识可直接从列出的官方文档跳转进行对应学习
Java学习三阶段-Day10
奔跑的小猫
07-10 84
1.京淘项目后端搭建 2.京淘项目前端搭建 3.前端脚手架结构说明
基于Java+SpringBoot+vue+elementui药品商城采购系统详细设计实现
热门推荐
java李阳勇的博客
08-09 5万+
药品管理系统主要功能设计：首页、个人中心、用户管理、员工管理、供应商管理、药品种类管理、药品信息管理、药品入库管理、药品出库管理、药品采购管理、系统管理、订单管理
day05-方法 java
06-13
day05-方法 java
Java基础Day05.xmind
06-29
适合java初学者
Javaday02训练
02-08
Java Day02训练是针对Java初学者或有一定基础的学习者设计的一次深入学习活动，旨在强化和巩固Java编程的基础知识。在这个训练中，你将接触到一系列关键的Java编程概念和技术，包括但不限于变量、数据类型、控制流程...
day05-店铺营业状态设置
11-03
"day05-店铺营业状态设置" 本节课程主要介绍了Redis的基本概念、安装、启动和停止服务、数据类型、常用命令等知识点。 Redis简介 Redis是一个基于内存的key-value结构数据库，具有高性能的读写能力，适合存储热点...
第二阶段（day01）html
sunshine195的博客
03-25 448
...
C++ - 函数重载
jiaowenjie的专栏
08-06 324
/打印的是第二个函数的地址。//打印的是第一个函数的地址。-> 重载函数在本质上是相互独立的不同函数。-> 函数返回值不能作为函数重载的依据。-> 重载函数的函数类型不同。**3.函数默认参数和函数重载****函数重载的注意事项：****4.函数重载的本质**
Spring事务
c1tenj2的博客
08-07 431
以银行转账为例，一次转账操作伴随着一个账户的扣钱和另一个账户的加钱，这个流程是一个原子操作，要么同时发生，一气呵成，要么都不做。AccountServiceImpl实现AccountService接口，里面只有一个转账方法AccountMapper以及其映射文件account数据库测试代码用1/0模拟程序运行时出现异常的情况由于没有开启事务，出现了莫名其妙少了100块钱的情况，说明这个事务不是连续的。
反射和注解
最新发布
supercool7的博客
08-08 253
反射的基本步骤包括获取Class对象、获取类的信息（构造函数、方法、字段等），然后通过Constructor、Method、Field等类的实例进行具体的操作。注解以@符号开头，通常紧跟着一个标识符，后面可以跟一些参数，用于给类、方法、字段等添加元数据信息，这些信息可以在编译时、运行时被读取和处理。通过Class类，可以获取类的构造函数、方法、字段等信息，而不需要在编译时确定这些信息。Spring、SpringBoot、Mybatis等框架中都大量使用了反射机制。此外，开发者还可以定义自己的注解，通过。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值