草庐IT

ElementUI的简单学习（一文快速上手ElementUI）

妄痴梦中 2023-04-09 原文

一，Elenment介绍

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，说白了就是美化界面，然后简洁代码的一个另类标签的使用；
ElementUI是基于Vue实现的；
使用Vue对html的标签做了重写;

二，基于CDN配置ElementUI（因此组件是以在线获取的方式，所以需要网络支撑）

  1. 进入官网Element官网复制样式表链接标签
  2. 引入样式表标签如图
  3. 引入组件库
  4. 引入组件库标签

三，测试是否成功

  1. 引入一个button测试
  2. 放入html界面的div标签中测试，(在IDEA需要运行服务器否则界面不会实时刷新)（这里小编前面运用Vue和Axios实现了表格的显示基于以上继续进行，当然也不妨碍你直接学习该章）得到了如图：

四，简单使用Element提供的标签

整合Element标签：
  1. 在组件库中寻找table合适的标签复制<template>内的内容，不复制<template>
  2. 放在对应的div里，并设置相关属性（干掉我们上一章自己写的样式）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ElementUI的学习</title>
    <!--引入elemenUI的样式文件-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="users">
    <el-button type="primary">主要按钮</el-button>
    <div class="userlist">
        <!--el-table标签：表格设置
                       :data：绑定对应数组名
                       border：加竖直的边框
                       style：设置总宽度占比
                       -->
        <el-table
                :data="users"
                border
                style="width: 100%">
            <!--el-table-column标签：列设置
                            prop：绑定属性名
                            label：设置表头名
                            width：
                                   -->
            <el-table-column
                    prop="userId"
                    label="用户编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="用户姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="userPassword"
                    label="用户密码"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="userEmail"
                    label="用户邮箱"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="userBirthday"
                    label="用户生日"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="userHobbys"
                    label="用户喜好"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="userSex"
                    label="用户姓别"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="userAddress"
                    label="用户地址"
                    width="180">
            </el-table-column>
        </el-table>
    </div>
</div>
<script src="js/vue.js"></script><!--调用vue文件-->
<script src="js/axios.min.js"></script><!--调用axios文件-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script><!--引用elementUI组件库-->
<script>
    new Vue({
        el: '#users',
        data() {
            return {
                users: [],
            }
        },
        methods: {//方法区
            getUsers() {//方法
                axios.get('user/queryUsers')//传入url地址
                    //请求响应成功执行的函数
                    .then(response => {//箭头函数
                            //从data属性中获得服务端回传数据
                            this.users = response.data;//将获得的数据赋值于data域中的users
                            console.log(this.users);
                        }
                        //请求或响应失败执行的函数
                    )
                    .catch(err => {
                            alert("错误");
                            console.log(err);
                        }
                    )
            }
        },
        created() {//DOM构建前执行
            this.getUsers();
        }
    });
</script>
</body>
</html>

  1. 得到：

  2. F12查看审查元素，可以看到这些标签就是基本标签的模块化

五，结合ElementUI实现一个表格

表格属性分类
  1. 在官网内向下查找，寻找目标属性

斑马线样式演示：
  1. 如斑马线式，添加stripe属性
<el-table
                :data="users"
                border
                stripe
                style="width: 100%">
  1. 得到：
文本居中演示：
  1. 再比如文本居中添加align属性
            <el-table-column
                    prop="userId"
                    label="用户编号"
                    align="center"
                    width="180">
  1. 得到：
分析问题+性别格式化演示
  1. 比如我的性别需要格式化，性别属于column所以找到对应属性
  2. 怎样用是个问题，看到Function，就要在方法区用函数有参传参，通过打印分析参数是什么
    在标签中加入属性
            <el-table-column
                    prop="userSex"
                    label="用户姓别"
                    width="180"
                    formatter="analysisSex">
  1. 添加方法
analysisSex(row, column, cellValue, index){
                console.log(row);
                console.log(column);
                console.log(cellValue);
                console.log(index);
            }
  1. 运行界面，发现不显示数据了，但是表格还在，说明是新添加的东西导致数据传递失败，F12审查元素看看错误
  2. 大概意思是：无效的属性:属性“格式化”的类型检查失败，获取值为“analysisSex”的字符串。并且左上角是Vue报错的，想想Vue的一些属性都是要绑定的，即属性前加v-bind：或者简写为：那么修改方式来了，给属性加上该前缀
            <el-table-column
                    prop="userSex"
                    label="用户姓别"
                    width="180"
                    :formatter="analysisSex">
  1. 得到界面，然后分析对应的对应行数对应的内容
  2. 点开第一行发现对应的是表格内的数据
  3. 而我们需要根据每一行的内容来输出我们的目的，所以只需要第一个参数row，那么修改为：
            <el-table-column
                    prop="userSex"
                    label="用户姓别"
                    width="180"
                    :formatter="analysisSex">

            analysisSex(row){
                return row.userSex==0?"女":"男";
            }
  1. 得到：
结合类选择器修改表头样式
  1. 找需要修改的样式的类名
  2. 找到类名，因为要修改整行所以拼个th，然后就正常修改内容
    <style>
        .el-table__header th{
            background-color: darkgray;
            color: white;
        }
    </style>
  1. 得到：
添加复选框
  1. 找到对应的table
  2. 看介绍
  3. 新增加一列
            <el-table-column
                   type="selection"
                   align="center"
                   width="50">
            </el-table-column>
  1. 得到：
增加操作栏，修改和删除按钮
  1. 找到对应的想要的按钮
            <el-table-column
                    prop=""
                    label="操作">
                <el-button type="primary" icon="el-icon-edit" circle></el-button>
                <el-button type="danger" icon="el-icon-delete" circle></el-button>
            </el-table-column>
  1. 此时会溢出屏幕，删掉每一行的width，让其自适应最后得到
增加延迟加载
  1. 找到目标加载方式
  2. 明白何时需要加载图标，即我们需要在信息未出现前，实现加载界面，加载完成界面消失，将加载信息嵌入我们的方法区（此处文本，图标可自行改）
  3. 得到：（此时信息未出现，我们以加载图标的形式，信息出现，我们就自动关闭了加载图标）
表单实现增加用户窗体
  1. 找到对话框实现我们的添加用户功能
  2. 在新的div中建立一个弹窗框
  3. 创建该属性在data区
  4. 设置点击事件
  5. 得到
  6. 此时添加用户信息，我们就需要表单了
  7. 写入表单所需要的信息框：（这里的爱好数组需要定义详细看下面的详细代码）

  8. 得到

六，全代码

详细代码：（剩下的功能就是和服务端交互了）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ElementUI的学习</title>
    <!--引入elemenUI的样式文件-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-table__header th {
            background-color: darkgray;
            color: white;
        }
    </style>
</head>
<body>
<div id="users">
    <div class="user-buttton">
        <el-button type="primary" @click="dialogVisible=true">添加用户</el-button>
    </div>
    <div class="userlist">
        <!--el-table标签：表格设置
                       :data：绑定对应数组名
                       border：加竖直的边框
                       style：设置总宽度占比
                       -->
        <el-table
                :data="users"
                border
                stripe
                fixed="center"
                style="width: 100%">
            <!--el-table-column标签：列设置
                            prop：绑定属性名
                            label：设置表头名
                            width：
                                   -->
            <el-table-column
                    type="selection"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="userId"
                    label="用户编号"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="用户姓名">
            </el-table-column>
            <el-table-column
                    prop="userPassword"
                    label="用户密码">
            </el-table-column>
            <el-table-column
                    prop="userEmail"
                    label="用户邮箱">
            </el-table-column>
            <el-table-column
                    prop="userBirthday"
                    label="用户生日">
            </el-table-column>
            <el-table-column
                    prop="userHobbys"
                    label="用户喜好">
            </el-table-column>
            <el-table-column
                    prop="userSex"
                    label="用户姓别"
                    :formatter="analysisSex">
            </el-table-column>
            <el-table-column
                    prop="userAddress"
                    label="用户地址">
            </el-table-column>
            <el-table-column
                    prop=""
                    label="操作">
                <el-button type="primary" icon="el-icon-edit" circle></el-button>
                <el-button type="danger" icon="el-icon-delete" circle></el-button>
            </el-table-column>
        </el-table>
    </div>
    <!--.sync:双向绑定-->
    <div class="win-add-user">
        <el-dialog
                title="添加用户"
                :visible.sync="dialogVisible"
                width="40%">
            <span>
                <el-form ref="addform" :model="user" label-width="80px">
                   <el-form-item label="用户名">
                        <el-input v-model="user.userName" placeholder="用户名"></el-input>
                   </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="user.userPassword" placeholder="密码" show-password></el-input>
                   </el-form-item>
                   <el-form-item label="E-mail">
                        <el-input v-model="user.userEmail" placeholder="E-mail"></el-input>
                   </el-form-item>
                   <el-form-item label="出生日期">
                            <el-date-picker
                                    v-model="user.userBirthday"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                   </el-form-item>
                   <el-form-item label="爱好">
                           <el-checkbox-group v-model="user.userHobbys">
                               <el-checkbox-button v-for="hobby in hobbysArr" :label="hobby"
                                                   :key="hobby">{{hobby}}</el-checkbox-button>
                           </el-checkbox-group>
                   </el-form-item>
                   <el-form-item label="性别">
                      <el-radio v-model="user.userSex" label="1">男</el-radio>
                       <el-radio v-model="user.userSex" label="0">女</el-radio>
                   </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="user.userAddress" placeholder="请输入地址"></el-input>
                   </el-form-item>

                </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible=true">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</div>
<script src="js/vue.js"></script><!--调用vue文件-->
<script src="js/axios.min.js"></script><!--调用axios文件-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script><!--引用elementUI组件库-->
<script>
    new Vue({
        el: '#users',
        data() {
            return {
                users: [],
                dialogVisible: false,//对话框显示属性，默认false
                user: {
                    userHobbys: [],//其它属性自动给，但是数组要定义
                },//user对象，用于添加用户的表单
                hobbysArr: ['美食', '文艺', '运动', '睡觉']
            }
        },
        methods: {//方法区
            getUsers() {//方法
                //执行加载条
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                axios.get('user/queryUsers')//传入url地址
                    //请求响应成功执行的函数
                    .then(response => {//箭头函数
                            loading.close();
                            //从data属性中获得服务端回传数据
                            this.users = response.data;//将获得的数据赋值于data域中的users
                            console.log(this.users);
                        }
                        //请求或响应失败执行的函数
                    )
                    .catch(err => {
                            alert("错误");
                            console.log(err);
                        }
                    )
            },
            analysisSex(row) {
                return row.userSex == 0 ? "女" : "男";
            },
        },
        created() {//DOM构建前执行
            this.getUsers();
        }
    });
</script>
ElementUI一文quotspangt

有关ElementUI的简单学习（一文快速上手ElementUI）的更多相关文章

  1. ruby - 简单获取法拉第超时 - 2

    有没有办法在这个简单的get方法中添加超时选项？我正在使用法拉第3.3。Faraday.get(url)四处寻找，我只能先发起连接后应用超时选项，然后应用超时选项。或者有什么简单的方法？这就是我现在正在做的:conn=Faraday.newresponse=conn.getdo|req|req.urlurlreq.options.timeout=2#2secondsend 最佳答案 试试这个:conn=Faraday.newdo|conn|conn.options.timeout=20endresponse=conn.get(url

  2. ruby - 用 Ruby 编写一个简单的网络服务器 - 2

    我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不，不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本，提供另一个脚本，它将在其标准输入上获取请求，并在其标准输出上返回完整的响应。到目前为止一切顺利，但事实证明这真的很脆弱，因为它在第二个请求上中断并出现错误:/usr/b

  3. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

    我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  4. ruby - 使用 Ruby 通过 Outlook 发送消息的最简单方法是什么？ - 2

    我的工作要求我为某些测试自动生成电子邮件。我一直在四处寻找，但未能找到可以快速实现的合理解决方案。它需要在outlook而不是其他邮件服务器中，因为我们有一些奇怪的身份验证规则，我们需要保存草稿而不是仅仅发送邮件的选项。显然win32ole可以做到这一点，但我找不到任何相当简单的例子。 最佳答案 假设存储了Outlook凭据并且您设置为自动登录到Outlook，WIN32OLE可以很好地完成此操作:require'win32ole'outlook=WIN32OLE.new('Outlook.Application')message=

  5. postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2

    //1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

  6. Qt Designer的简单使用 - 2

    在前面两节的例子中，主界面窗口的尺寸和标签控件显示的矩形区域等，都是用C++代码编写的。窗口和控件的尺寸都是预估的，控件如果多起来，那就不好估计每个控件合适的位置和大小了。用C++代码编写图形界面的问题就是不直观，因此Qt项目开发了专门的可视化图形界面编辑器——QtDesigner（Qt设计师）。通过QtDesigner就可以很方便地创建图形界面文件*.ui，然后将ui文件应用到源代码里面，做到“所见即所得”，大大方便了图形界面的设计。本节就演示一下QtDesigner的简单使用，学习拖拽控件和设置控件属性，并将ui文件应用到Qt程序代码里。使用QtDesigner设计界面在开始菜单中找到「Q

  7. LC滤波器设计学习笔记（一）滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称

  8. CAN协议的学习与理解 - 2

    最近在学习CAN，记录一下，也供大家参考交流。推荐几个我觉得很好的CAN学习，本文也是在看了他们的好文之后做的笔记首先是瑞萨的CAN入门，真的通透；秀！靠这篇我竟然2天理解了CAN协议！实战STM32F4CAN！原文链接：https://blog.csdn.net/XiaoXiaoPengBo/article/details/116206252CAN详解（小白教程）原文链接：https://blog.csdn.net/xwwwj/article/details/105372234一篇易懂的CAN通讯协议指南1一篇易懂的CAN通讯协议指南1-知乎(zhihu.com)视频推荐CAN总线个人知识总

  9. 深度学习部署：Windows安装pycocotools报错解决方法 - 2

    深度学习部署：Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯：公主号AiCharm本系列是作者在跑一些深度学习实例时，遇到的各种各样的问题及解决办法，希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

  10. ruby - 使用 Ruby，计算 n x m 数组的每一列中有多少个 true 的简单方法是什么？ - 2

    给定一个nxmbool数组:[[true,true,false],[false,true,true],[false,true,true]]有什么简单的方法可以返回“该列中有多少个true？”结果应该是[1,3,2] 最佳答案 使用转置得到一个数组，其中每个子数组代表一列，然后将每一列映射到其中的true数:arr.transpose.map{|subarr|subarr.count(true)}这是一个带有inject的版本，应该在1.8.6上运行，没有任何依赖:arr.transpose.map{|subarr|subarr.in

随机推荐