Element-UI详解
Element-UI
- Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
- Element UI是基于Vue 2.0的
- Element UI 提供一组组件
- Element UI 提供组件的参考实例, 直接复制
安装ElementUI
通过 vue-cli创建vue项目
安装 element-ui组件
npm i element-ui配置main.js文件
/* 导入element-ui样式*/import 'element-ui/lib/theme-chalk/index.css'import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'/* element-ui所有组件*/import ElementUI from 'element-ui'Vue.use(ElementUI)Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)}).$mount('#app')
element所有的组件都存在于其官网上，找到所需要的组件，复制其代码，拷贝到项目的位置上即可使用 ： https://element.eleme.cn/#/zh-CN/component/installation
我自己的项目路径：https://github.com/kedaya-github/vue_ElementUI
使用工具：
- idea+VSCode+Sqlyog
- vue+ElementUI+springboot+mysql
使用ElementUI创建一个完整的布局流程
清空vue项目的 App.vue 文件
去ElementUI官网，找到一个Container 布局容器 ， 拷贝一个自己想要的布局容器代码 到App.vue中
去ElementUI官网，找导航菜单，设置头部信息
将导航菜单的代码，复制到 App.vue 首页中。这里使用侧栏菜单
<template><div id="app" style="height:900px"><el-container style="height:100%"><el-aside width="150px" style="height:100%"><el-menu:default-active="$route.path":router="true"class="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="/login"><i class="el-icon-s-custom"></i><span>登录</span></el-menu-item><el-menu-item index="/category"><i class="el-icon-s-grid"></i><span slot="title">所有分类</span></el-menu-item><el-menu-item index="/book"><i class="el-icon-reading"></i><span slot="title">所有图书</span></el-menu-item><el-menu-item index="4" disabled></el-menu-item></el-menu></el-aside><el-main style="height:100%"><router-view></router-view></el-main></el-container></div></template><style>.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;}body > .el-container {margin-bottom: 40px;}.el-container:nth-child(5) .el-aside,.el-container:nth-child(6) .el-aside {line-height: 260px;}.el-container:nth-child(7) .el-aside {line-height: 320px;}</style>导航菜单详解：
- el-aside为侧 el-main为显示部分
- el-aside中的 el-menu属性设置
- :default-active="$route.path" ：设置组件按钮点击之后，显示的效果不会因为页面的刷新而重置
- :router=“true” ： 设置路由按钮可以跳转显示路由
- el-menu-item 的 index 属性为设置 路由跳转的 路径
- el-main中 ： 设置一个 router-view 来展示路由
下面对常用的 element 一些特殊的组件的具体使用方法 功能做一些总结
table表格
el-table 可以循环data中的某个 数组数据，循环出一个具体的表现表格
<el-table:data="books"style="width: 100%"@selection-change="handleSelectionChange"ref="multipleTable"tooltip-effect="dark"><el-table-columntype="selection"width="55":show-overflow-tooltip="true"></el-table-column><el-table-columnprop="bid"label="图书编号"width="100"></el-table-column><el-table-columnprop="title"label="图书名称"width="150"></el-table-column><el-table-columnprop="price"label="图书价钱"width="120"></el-table-column><el-table-columnprop="category.cname"label="分类名称"width="120"></el-table-column><el-table-columnlabel="操作"width="100"><template slot-scope="scope"><!-- <el-button type="text" size="small">查看</el-button> --><el-button type="text" size="small" @click="getByBid(scope.row)">修改</el-button></template></el-table-column></el-table>- :data ： 对应data中的数据，要循环数组，遍历的数据
- el-table-column : 为一列数据，多个el-table-column就可以组成table的一行数据 。
- label ： 为列的标头，
- prop ： 如果循环数据是对象，对应的就是每一个对象的 属性
- width ： 当前列的宽度
具体的显示效果
点击修改按钮，获取每一行数据的id
scope.row 。 可以将当前一行数据的对象 传入到方法的形参中
<el-table-columnlabel="操作"width="100"><template slot-scope="scope"><!-- <el-button type="text" size="small">查看</el-button> --><el-button type="text" size="small" @click="getByBid(scope.row)">修改</el-button></template></el-table-column>需要在 定义一个 template 父标签， 并加入 slot-scope="scope"属性
type ： 指定按钮以什么形式展示， text超链接文本形式，不写type，则以原生的 button按钮展示
size ： 指定按钮大小， small小的 mini最小 medium大的
methods中 getByBid 方法，接收的形参，就是当前这行数据的对象，拥有这行所有的数据
即可完成，修改回显
复选框按钮点击，将选中的 数据对象传入到data中
写一个复选框，在 el-table-column的属性上 type=selection表示为一个复选框
<el-table-columntype="selection"width="55":show-overflow-tooltip="true"></el-table-column>复选框选中，将当前数据 保存到 data的某个属性中
在 父标签 el-table 加入属性 @selection-change=“handleSelectionChange”
handleSelectionChange为data中的属性名，为一个数组
<el-table:data="books"style="width: 100%"@selection-change="handleSelectionChange"tooltip-effect="dark">当复选框选中时，当前行的数据对象，会传入到 属性handleSelectionChange中
table表格中 加入分页操作
在 el-table 结束后， 加入分页的代码
<div><el-paginationbackgroundlayout="prev, pager, next":total="pages" @current-change="findAll"@prev-click="findAll"@next-click="findAll"></el-pagination></div>- ：total ： 指定分页的总页数，从data中获取， 需要*10 ； 80
表示8页，需要int类型，如果后台传入的是字符串，要Number(val)转换 - @current-change ： 当点击某一页数时，调用方法
- @prev-click ： 点击上一页事件
- @next-click ： 点击下一页事件
- ：total ： 指定分页的总页数，从data中获取， 需要*10 ； 80
分页中的数据出发后，调用的函数，形参中会自动赋值，点击的页数
点击修改按钮，出现对话 悬浮框
点击修改按钮，出现一个修改悬浮框，展示要修改的回显数据
<!-- 修改对话框 --><div><el-dialog title="修改分类" :visible.sync="dialogFormVisible"><el-form><el-form-item label="分类名称"><el-input v-model="updateCategory.cname" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="update()">确 定</el-button></div></el-dialog></div>- el-dialog ： 定义一个对话框
- v-model ： 双向绑定数据，回显数据
- ：visible.sync = 根据 dialogFormVisible 属性的boolean值，判断是否显示。 true为显示 ， false为隐藏
模糊查询，表格中搜索框
在elementUI的官网中，表格中有一个 自定义表头的样式，具有条件搜索框
<el-table-columnwidth="155"><!-- slot指定为 header头部 --><template slot="header" slot-scope="scope"><el-inputv-model="search"size="mini"placeholder="输入关键字搜索"@keyup.native="searchBook()"/></template></el-table-column>template ： 模块代码，一般的代码如果不以属性写入 el-column中，就要写在此中
slot ： 设置为 header， 为当前为标头
slot-scope ： 绑定当前列行数据，不加此属性，文本框无法输入
el-input ： 文本输入框，双向绑定一个 属性数据
@keyip.native ： 绑定键盘按起事件，输入字符之后，直接调用函数，查询条件数据
.native ： el-input 封装过硬件（键盘，鼠标）的触发事件，不加 .vative无法触发效果
总结
使用elementUI的组件，首先去官网，找到你需要的样式的组件代码，直接拷贝进你的 项目所需位置处。
再根据你需要的功能，进行修改。以上是对完成普通 增删改查 时，遇到的各种数据传递的总结。
以上总结，根据我自己的代码基础上，作出的。最好边看代码，边看文档解释。 比较容易搞懂。
Element-UI详解相关推荐
- Android UI详解之布局管理器（一）
Android UI详解之布局管理器 一.布局管理器 ①顶级父类View ②子类GroupView ③AbsoluteLayout.FrameLayout.LinearLayout.GridLayou ...
- XSD标准架构-----xsd:element 元素详解
声明一个元素. <elementabstract = Boolean : falseblock = (#all | List of (extension | restriction | subs ...
- JavaWeb前端框架VUE和Element组件详解
文章目录 前言 一.前端框架--VUE 1.1 概述 1.2 快速入门 1.3 Vue 指令 1.3.1 v-bind & v-model 指令 1.3.2 v-on 指令 1.3.3 条件判 ...
- Spark Web UI详解
spark Web UI是学习调试spark任务的入口,查看spark UI任务日志也是一项必备技能.但在几番搜索后,一直没能找到全面详细地对如何查看spark Web UI方法的文章,故在查看资料及 ...
- element 验证详解 自定义验证规则
如图,验证功能点名称,长度1-20并且是数字和字母的组合. 长度是1-20,这个很好办,直接 el-form表单上添加 :rules="rules" , 添加个 ref=" ...
- IDEA更改主题插件——Material Theme UI详解
文章目录 IDEA更改主题插件--Material Theme UI 一.安装 二.设置 1. 主设置 (1) 主题 (2) 突出颜色 2. 高级设置之选项卡 3. 高级设置之compact 4. 高 ...
- JUCE的UI详解（Slider篇）
1. Slider是什么 JUCE的Slider是一个用于更改值的滑块控件.滑块可以是水平的.垂直的或旋转的,并且可以选择显示文本框来表示当前值. 2. 如何使用Slider 要使用它,首先需要创建一 ...
- element 问号_element ui 对话框el-dialog关闭事件详解
element ui 对话框el-dialog关闭事件详解 通常会有需求,在关闭弹框后需要清空填写的数据,这时候就需要关闭事件了 在标签中加入@close='closeDialog' mothods中 ...
- element ui路由配置文件_element-ui使用导航栏跳转路由的用法详解
最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项目的用法参考 首先复制官网的例子,在这基础上 ...
- Element Plus 实例详解（一）___安装设置
Element Plus 实例详解(一) ___安装设置 本篇目录: 一.前言 二.安装方法 1.环境支持 2.Element Plus安装使用方式 (1).使用包管理器 (2).浏览器直接引入 3. ...
最新文章
- 大有可为的“正则表达式”(二）
- 铲屎官福音：汪星人和喵星人的小情绪，AI 可以识别了
- 开发办公APP时间估算
- 和我一起学《HTTP权威指南》——安全HTTP与HTTPS
- UNIX操作-命令快捷键
- 使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小
- 聚集索引、辅助索引、覆盖索引、联合索引
- LeetCode 206. 反转链表 思考分析
- MyBatis复习(十)：注解开发
- Android基础之Java多态、继承、重载和重写的区别
- 张大奕网店关联公司被行政处罚：因以不合格产品冒充合格产品
- 应用高斯分布来解决异常检测问题（一）
- PHP-自定义模板-学习笔记
- 串口扫盲十三:接口技术的基本知识
- Python中计算二重积分
- PageHelper.startPage的使用
- 网络基础虚拟化VRRP/MSTP冗余技术
- 三大突破让人工智能终成现实
- CrossOver让你在M1Mac计算机运行Windows应用程序
- 关于宽带拨号上网的笑话，我自己闹的笑话。