Element ui 快速入门（基础知识点）

element ui官网

前言：

        在当今时代，我们在编写计算机程序时，不仅仅是写几个增删改查的简单功能，为了满足广大用户对页面美观的需求，为了让程序员们写一些功能更简便，提高团队协作效率，所以element ui孕育而生。Element UI是一个能够显著提升开发效率、保障界面质量及促进团队协作的前端UI框架，特别适合构建现代Web应用程序。

        element ui 的作用与意义主要体现在以下几点：

        

  1. 加速开发进程：Element UI 提供了一整套预设的、可复用的 UI 组件，如按钮、表单、导航、布局等，这些组件都经过精心设计和测试，可以直接在项目中使用，极大地减少了前端开发者从零开始编写和设计界面元素的时间，从而加快了 Web 应用程序的开发速度。

  2. 保证界面一致性与美观性：Element UI 遵循统一的设计规范，其组件拥有高质量的设计和一致的视觉风格，有助于构建出既美观又具有一致用户体验的用户界面，这对于提升品牌形象和用户满意度至关重要。

  3. 提升响应式设计能力：由于 Element UI 支持响应式布局，开发人员可以轻松创建适应多种屏幕尺寸和设备类型的应用，无论是桌面还是移动设备，都能确保用户界面的良好展示效果，增强了应用的普适性和可用性。

  4. 简化维护工作：使用统一的组件库，当需要更新或修改界面时，只需调整相应的组件设置即可全局生效，大大降低了后期维护的工作量和复杂度。

  5. 提高团队协作效率：Element UI 的标准化和模块化特性使得团队成员之间可以共享和复用代码，新成员也能更快融入团队开发流程，提高了团队的整体协作效率。

  6. 增强可定制性和扩展性：Element UI 提供了丰富的插件扩展机制和主题定制功能，允许开发者根据项目需求进行灵活定制，从而满足不同场景和品牌风格的要求。

使用npm方式安装

推荐用npm的方式安装，因为他可以更好地和webpack打包工具配合使用

安装命令：npm i element-ui -S

引入element ui

在main.js中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

基本组件介绍（只说明常用组件）

1.Container 布局容器

一般采用三块（header，aside，main），代码如下：

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

 2.Icon 图标

为了美观，我们引入element ui 中的图标加以修饰，最基础的就是修改图标，分享图标，删除图标和搜索图标

直接通过设置类名为 el-icon-iconName 来使用即可。

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>

3.Button 按钮

有时操作需要用按钮控制，下面是一些常用按钮

使用type、plain、round和circle属性来定义 Button 的样式。

type就是默认按钮

plain就是朴素按钮

round就是圆角按钮

circle就是原型按钮

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

如图所示：

4. Radio 单选框

radio单选框一般用于添加功能时的性别选择，或者某一选项有且只能有一项

<template>
  <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
</template>

v-model绑定我们要传递的变量，而label是显示在页面上的内容来供客户选择 ，label可以是String、Number或Boolean。

5.Checkbox 多选框

一般用于多项选择，例如添加一个用户，用户的爱好肯定不止一个，此时会用到多选框，我们可以给多选框加上一个value进行传递。多选框出现，v-model默认绑定布尔值false，就是默认不选中，代码如下：

<template>
  <!-- `checked` 为 true 或 false -->
  <el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checked: false
      };
    }
  };
</script>

6.Input 输入框

一般用于添加修改搜索功能，v-model双向数据绑定用户输入的内容

在定义密码输入框时，有一个属性可以控制密码是否显示：show-password

Input 为受控组件，它总会显示 Vue 绑定值。

通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。

不支持 v-model 修饰符。

7.Select 选择器

也就是下拉菜单，一般用于类型选择，当选项过多时，使用下拉菜单展示并选择内容。

v-model的值为当前被选中的el-option的 value 属性值 

options为我们从后端获取的数组通过v-for循环遍历

：key是唯一标识符，必须要有，否则报错无法渲染

：label就是渲染在页面上的内容，用户可以选择

：value就是代码间传递的内容，用户看不到

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

8.Form 表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

我在此只解释表单验证

首先需要绑定表单验证规则:rules="rules"，其次需要用到prop属性，表单验证才能起作用

required是此栏不能为空，否则会提示信息message，trigger是点击提交时，input框中检测到为空或者失去焦点，就会阻止提交功能的触发

9.Table 表格

在此，我为大家提供一个带有全选框，有操作栏，有排序的表格

ref是标识，：data是要展示的数据

@selection-change="handleSelectionChange"这个方法有一个参数，参数就是被选中的当条数据

:default-sort = "{prop: 'date', order: 'descending'}是通过prop绑定date时间这一项，descending是倒序的意思，默认倒序排序

sortable是排序按钮

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据

代码如下：

<template>
  <el-table
    :default-sort = "{prop: 'date', order: 'descending'}"
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      sortable
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        multipleSelection: []
      }
    },

    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

10.Dialog 对话框

Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Form 组件的样例。

如图所示：

 代码如下：


<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="活动名称" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" :label-width="formLabelWidth">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>

当dialogFormVisible设定为布尔值true时，才会打开这个对话框，相反为false时就会关闭对话框

11.Pagination 分页

对于分页，我在此介绍一个完整功能的分页，如图所示：

 代码如下所示：

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
<script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    data() {
      return {
        
      };
    }
  }
</script>

它里面有两个方法：@size-change="handleSizeChange"：控制每页几条数据

                                @current-change="handleCurrentChange"：控制当前所在的页码

:current-page.sync绑定当前页码

:page-sizes="[100, 200, 300, 400]"下拉框的选项

:page-size="100"当前默认显示每页条数

:total="1000"总数据条数

总结

通过以上几个简单组件我们可以总结出element ui为什么在当今互联网时代如此火爆，下面是我总结的一些使用element ui的好处：

  1. 高效开发：提供一系列现成的、高质量的Vue组件，加速Web应用程序的开发过程。
  2. 设计一致性：确保应用程序界面元素间的一致性与美观性，提升用户体验。
  3. 易用性：组件简单易用，文档齐全，降低了学习成本，便于开发者快速上手。
  4. 响应式布局：支持响应式设计，适应不同设备和屏幕尺寸，实现多平台兼容。
  5. 节省维护成本：通过统一的组件和样式，简化后期的维护和迭代工作。
  6. 团队协作优化：标准化的组件库促进团队成员之间的高效协作和代码复用。
  7. 高度可定制：支持主题定制和插件扩展，满足项目的个性化需求。
  8. 体积优化考量：虽然整体引入可能增加项目体积，但针对大量使用Element UI的项目，其带来的开发效率提升远超体积增加的劣势。
  9. 成熟生态：作为Vue生态系统中的成熟框架，Element UI拥有活跃的社区支持和丰富的第三方资源。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/664312.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

看到大厂工时爆料，我沉默了。。

看到大厂工时爆料，我沉默了。。

大厂工时爆料 今天逛脉脉的时候&#xff0c;看到一篇名为「一人一句&#xff0c;大厂工时爆料」的帖子&#xff1a; 点开之后&#xff0c;我沉默了 ... 出来爆料的基本上都是 10 小时。 好奇心之下&#xff0c;我搜索了一下去年很热的排行榜&#xff1a; 2023 年最新互联网公司…
阅读更多...
开发小技巧

开发小技巧

1.根据JSON生成实体类 打开网站&#xff1a;在线JSON校验格式化工具&#xff08;Be JSON&#xff09; 选中JSON转JAVA实体类&#xff0c;在文本框中输入要转实体类的JSON&#xff0c; 在下边可以输入类名、包名&#xff0c;然后点击下载即可 2、IDEA中复制类的全路径&#xf…
阅读更多...
Java—— StringBuilder 和 StringBuffer

Java—— StringBuilder 和 StringBuffer

1.介绍 由于String的不可更改特性&#xff0c;为了方便字符串的修改&#xff0c;Java中又提供了StringBuilder和Stringbuffer类&#xff0c;这两个类大部分功能是相同的&#xff0c;以下为常用方法&#xff1a; public static void main(String[] args) {StringBuilder sb1 n…
阅读更多...
electron初学

electron初学

最近有一个开发桌面端的业务&#xff0c;考虑到跨平台就使用了electron。 引用官网&#xff1a;Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows…
阅读更多...
[代码复现]Self-Attentive Sequential Recommendation(ing)

[代码复现]Self-Attentive Sequential Recommendation(ing)

参考代码&#xff1a;SASRec.pytorch 可参考资料&#xff1a;SASRec代码解析 前言&#xff1a;文中有疑问的地方用?表示了。可以通过ctrlF搜索’?。 环境 conda create -n SASRec python3.9 pip install torch torchvision因为我是mac运行的&#xff0c;所以device是mps 下面…
阅读更多...
MATLAB函数模块光显示zeros/poles怎么办？

MATLAB函数模块光显示zeros/poles怎么办？

出现下面这种图了怎么办&#xff1f;是做错了吗&#xff1f; 这种图就是它显示不完整了&#xff0c;把它拉大点就可以完全显示了。
阅读更多...
编辑任何场景! 3DitScene：通过语言引导的解耦 Gaussian Splatting开源来袭！

编辑任何场景! 3DitScene：通过语言引导的解耦 Gaussian Splatting开源来袭！

文章&#xff1a;https://arxiv.org/pdf/2405.18424 项目&#xff1a;https://zqh0253.github.io/3DitScene/ huggingface:https://huggingface.co/spaces/qihang/3Dit-Scene 场景图像编辑在娱乐、摄影和广告设计中至关重要。现有方法仅专注于2D个体对象或3D全局场景编辑&…
阅读更多...
harbor -- docker私有仓库安装配置

harbor -- docker私有仓库安装配置

1 安装docker-compose $ curl -L "https://get.daocloud.io/docker/compose/releases/download/v1.25.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose $ chmod x /usr/local/bin/docker-compose 2 安装配置harbor $ wget https://g…
阅读更多...
Windows11 wsl2编译Android14 使用ASfP Debug windows上启动的模拟器

Windows11 wsl2编译Android14 使用ASfP Debug windows上启动的模拟器

wsl2的安装和配置 安装&#xff1a; 直接百度搜索最新的wsl2安装教程即可&#xff0c;官网&#xff1a;https://learn.microsoft.com/zh-cn/windows/wsl/install 1. 启用适用于 Linux 的 Windows 子系统(以管理员身份打开 PowerShell 并运行) Enable-WindowsOptionalFeature…
阅读更多...
网络安全岗秋招面试题及面试经验分享

网络安全岗秋招面试题及面试经验分享

Hello&#xff0c;各位小伙伴&#xff0c;我作为一名网络安全工程师曾经在秋招中斩获&#x1f51f;个offer&#x1f33c;&#xff0c;并在国内知名互联网公司任职过的职场老油条&#xff0c;希望可以将我的面试的网络安全大厂面试题和好运分享给大家~ 转眼2024年秋招又快到了金…
阅读更多...
【学习】软件测试中如何进行Web网页兼容性测试

【学习】软件测试中如何进行Web网页兼容性测试

在数字时代&#xff0c;Web网页作为信息传递和交流的重要平台&#xff0c;其稳定性和用户体验至关重要。如同一位匠人细致打磨他的工艺品&#xff0c;开发者亦需精心测试网页的兼容性&#xff0c;确保其在各种设备和浏览器上的表现无懈可击。今天&#xff0c;我们就来探讨如何对…
阅读更多...
启智CV机器人，ROS, ubuntu 18.04

启智CV机器人，ROS, ubuntu 18.04

资料&#xff1a; https://wiki.ros.org/kinetic/Installation/Ubuntu https://blog.csdn.net/qq_44339029/article/details/120579608 http://wiki.ros.org/melodic/Installation/Ubuntu https://github.com/6-robot/wpb_cv 一、安装ros环境 装VM。 装ubuntu18.04 desktop.…
阅读更多...
【赠书第27期】向AI提问的艺术：提示工程入门与应用

【赠书第27期】向AI提问的艺术：提示工程入门与应用

文章目录 前言 1 问题的构建 1.1 明确性与具体性 1.2 结构化与层次性 1.3 相关性与针对性 2 提问的技巧 2.1 简洁明了 2.2 避免歧义 2.3 使用自然语言 3 与AI的互动策略 3.1 耐心与理解 3.2 逐步引导 3.3 反馈与调整 4 总结与展望 5 推荐图书 6 粉丝福利 前言 …
阅读更多...
uni-app实现页面通信EventChannel

uni-app实现页面通信EventChannel

uni-app实现页面通信EventChannel 之前使用了EventBus的方法实现不同页面组件之间的一个通信&#xff0c;在uni-app中&#xff0c;我们也可以使用uni-app API —— uni.navigateTo来实现页面间的通信。注&#xff1a;2.8.9 支持页面间事件通信通道。 1. 向被打开页面传送数据…
阅读更多...
XX集团信息(IT)战略和规划项目(154页PPT)

XX集团信息(IT)战略和规划项目(154页PPT)

方案介绍&#xff1a; 本集团信息&#xff08;IT&#xff09;战略与规划项目方案是集团数字化转型和信息化建设的重要组成部分。通过本方案的实施&#xff0c;我们将为集团的长期发展提供坚实的信息化支撑&#xff0c;提高集团的管理水平和运营效率&#xff0c;增强企业的竞争…
阅读更多...
来聊聊Redis中的字符串对象的设计

来聊聊Redis中的字符串对象的设计

写在文章开头 redis对于性能的追求做到了极致，在之前的文章中我们redis的简单动态字符串SDS进行了详细的介绍了，而本文我将从顶层的视角来聊聊Redis基于SDS等数据结构实现一个平衡时间与空间的字符串对象。 Hi，我是 sharkChili ，是个不断在硬核技术上作死的 java coder ，…
阅读更多...
2024年最具性价比宠物空气净化器推荐！小米、希喂、安德迈真实测评

2024年最具性价比宠物空气净化器推荐！小米、希喂、安德迈真实测评

一款理想的宠物空气净化器应该具备去除浮毛和异味等基本功能&#xff0c;但要找到一款既满足个人需求、性能出色且性价比高的产品&#xff0c;这需要一定的选择技巧。 遗憾的是&#xff0c;许多人在购买时由于对相关术语的不熟悉或缺乏挑选经验&#xff0c;可能会买到不适合自…
阅读更多...
Java流与链表：探索java.util.stream与LinkedList的交汇点

Java流与链表：探索java.util.stream与LinkedList的交汇点

在现代Java开发中&#xff0c;流&#xff08;Streams&#xff09;和链表&#xff08;LinkedList&#xff09;都是强大且常用的数据处理工具。java.util.stream提供了高效的方式来处理数据流&#xff0c;而LinkedList则是java.util包中的经典集合实现。本文将探索它们的交汇点&a…
阅读更多...
C# PaddleOCR 单字识别效果

C# PaddleOCR 单字识别效果

C# PaddleOCR 单字识别效果 效果 说明 根据《百度办公文档识别C离线SDKV1.2用户接入文档.pdf》&#xff0c;使用C封装DLL&#xff0c;C#调用。 背景 为使客户、第三方开发者等能够更快速、方便的接入使用百度办公文档识别 SDK、促进百度 OCR产品赋能更多客户&#xff0c;特设…
阅读更多...
[初始计算机]——计算机网络的基本概念和发展史及OSI参考模型

[初始计算机]——计算机网络的基本概念和发展史及OSI参考模型

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;网络通信基础TCP/IP专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年5月30日11点59分 &#x1f004;️文章质量&#xff1a;96分 ​ 目录 &#x1f310;计算机网络概述 &#x1f4af;…
阅读更多...
最新文章

Copyright @ 2022~2023