Element-UI详解_elementui-程序员宅基地

技术标签: ElementUI教程  vue  elementUI  ElementUI  

Element-UI

  • Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
    • Element UI是基于Vue 2.0的
    • Element UI 提供一组组件
    • Element UI 提供组件的参考实例, 直接复制

安装ElementUI

  1. 通过 vue-cli创建vue项目

  2. 安装 element-ui组件

    npm i element-ui
    
  3. 配置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 = false
     
     new 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创建一个完整的布局流程

  1. 清空vue项目的 App.vue 文件
    在这里插入图片描述

  2. 去ElementUI官网,找到一个Container 布局容器 , 拷贝一个自己想要的布局容器代码 到App.vue中
    在这里插入图片描述
    在这里插入图片描述

  3. 去ElementUI官网,找导航菜单,设置头部信息
    在这里插入图片描述

  4. 将导航菜单的代码,复制到 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>
    
  5. 导航菜单详解:

    1. el-aside为侧 el-main为显示部分
    2. el-aside中的 el-menu属性设置
      1. :default-active="$route.path" :设置组件按钮点击之后,显示的效果不会因为页面的刷新而重置
      2. :router=“true” : 设置路由按钮可以跳转显示路由
      3. el-menu-item 的 index 属性为设置 路由跳转的 路径
    3. 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-column
          type="selection"
          width="55"
          :show-overflow-tooltip="true"
          >
      </el-table-column>
    
      <el-table-column
          prop="bid"
          label="图书编号"
          width="100">
      </el-table-column>
      <el-table-column
          prop="title"
          label="图书名称"
          width="150">
      </el-table-column>
      <el-table-column
          prop="price"
          label="图书价钱"
          width="120">
      </el-table-column>
      <el-table-column
          prop="category.cname"
          label="分类名称"
          width="120">
      </el-table-column>
       <el-table-column
          label="操作"
          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-column
          label="操作"
          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-column
          type="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-pagination
              background
              layout="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 : 点击下一页事件
  • 分页中的数据出发后,调用的函数,形参中会自动赋值,点击的页数

在这里插入图片描述


点击修改按钮,出现对话 悬浮框

  • 点击修改按钮,出现一个修改悬浮框,展示要修改的回显数据

      <!-- 修改对话框 -->
      <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-column
      width="155">
      <!-- slot指定为 header头部 -->
          <template slot="header" slot-scope="scope">
              <el-input
              v-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的组件,首先去官网,找到你需要的样式的组件代码,直接拷贝进你的 项目所需位置处。

  • 再根据你需要的功能,进行修改。以上是对完成普通 增删改查 时,遇到的各种数据传递的总结。

  • 以上总结,根据我自己的代码基础上,作出的。最好边看代码,边看文档解释。 比较容易搞懂。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42426159/article/details/102928417

智能推荐

mysql 转decimal,在MySql中将VARCHAR转换为DECIMAL值-程序员宅基地

文章浏览阅读1.3k次。I have imported a CSV file that contains string values (eg.eating) and floating values (eg. 0.87) into a table in my phpMyAdmin database. After I get ride of all the string values and retain only the ..._mysql decimal转换varchar

python功能模块之psutil_详解Python3.6安装psutil模块和功能简介-程序员宅基地

文章浏览阅读441次。详解Python3.6安装psutil模块和功能简介来源:中文源码网浏览: 次日期:2018年9月2日【下载文档:详解Python3.6安装psutil模块和功能简介.txt】(友情提示:右键点上行txt文档名->目标另存为)详解Python3.6安装psutil模块和功能简介 一、psutil模块1. psutil是一个跨平台库,能够轻松实现获取..._python3.6 -m test.test_utils_push解释

java处理json数组_用Java处理数组-程序员宅基地

文章浏览阅读1.8k次。java8处理数组If a program needs to work with a number of values of the same data type, you could declare a variable for each number. For example, a program that displays lottery numbers: 如果程序需要使用多个相同数据..._json数组 java

ansible安装遇到的问题,不太懂,望大神指教_nothing provides python(abi) = 3.11 needed by ansi-程序员宅基地

文章浏览阅读3.4k次,点赞3次,收藏4次。安装ansible遇到的问题,望大神指点_nothing provides python(abi) = 3.11 needed by ansible-7.2.0-1.el8.noarch

关于LNK2001错误的一些总结 (摘录) - David Hu - 网大博客 - powered by phpwind.net-程序员宅基地

文章浏览阅读1.7k次。导读: 在最开始的编程过程中,最常出现的错误就是LNK2001这个错误,究其原因,其实一句话可以解释:当程序调用函数(function1)时,没有找到function1具体的实现部分。最常见的例子和解释:main or winmain函数:应该是选择工程类型的时候有错误,因为系统会根据subsystem的选项来决定调用main或winmain作为程序的入口函数,如果是console,会选择

让你的开发效率提高1400%的IntelliJ IDEA插件汇总_鲁班大叔 maven插件-程序员宅基地

文章浏览阅读1k次,点赞6次,收藏28次。哈喽,大家好,我是爱学习的莫提。从大二就开始接触并使用IDEA这款软件,现在它同样是我工作中的主力开发工具。对于Java开发人员来说,掌握这款软件的基本使用也已经是必备的工作技能。这款软件相比于Eclipse来说也是有非常多的优点,更加的高效,也更加的稳定。IDEA的插件市场也是非常的丰富!吸引了非常多的开发者从Eclipse来过渡到IDEA,那么正所谓「工欲善其事,必先利其器」,经过我这几年的使用,以及工作之后和同事的一些交流分享。我总结出了很多可以让我们的使用体验和开发效率得到很大程度提升的。_鲁班大叔 maven插件

随便推点

Multsim 电路仿真软件中交流电压表与电流表读数不准确的原因处理_multisim汉化版交流电表读数不准-程序员宅基地

文章浏览阅读1.6w次,点赞44次,收藏38次。Multsim14.2 电路仿真软件中交流电压表与电流表读数不准确的原因处理看图,读数不正确问题原因处理方案修改成以下内容并保存成功处理看图,读数不正确问题原因这是汉化引起的小BUG处理方案修改汉化文件夹中的 PRP.ewstr 大约第80多行左右将交流改为 AC将直流改为 DC修改成以下内容并保存** IDS_MODECMB_TXT_AC=>AC< **..._multisim汉化版交流电表读数不准

ACM比赛中如何加速c++的输入输出?如何使cin速度与scanf速度相当?什么是最快的输入输出方法?_c++用cin怎么和scanf一样快-程序员宅基地

文章浏览阅读1.4w次,点赞25次,收藏73次。在竞赛中,遇到大数据时,往往读文件成了程序运行速度的瓶颈,需要更快的读取方式。相信几乎所有的C++学习者都在cin机器缓慢的速度上栽过跟头,于是从此以后发誓不用cin读数据。还有人说Pascal的read语句的速度是C/C++中scanf比不上的,C++选手只能干着急。难道C++真的低Pascal一等吗?答案是不言而喻的。一个进阶的方法是把数据一下子读进来,然后再转化字符串,这种方法传说中很不错,_c++用cin怎么和scanf一样快

江苏省2018事业单位计算机统考,2018年江苏上半年事业单位统考报名链接-程序员宅基地

文章浏览阅读113次。原标题:2018年江苏上半年事业单位统考报名链接江苏省属事业单位笔试报名已经开始,笔试定于4月21日。为了方便各位考生报名。连云港天翔教育Q群:637640535现汇总江苏省属事业单位报名以及各地市报名链接。其中最早报名的是省属事业单位3月25日,报名最迟的是淮安事业单位,苏州虎丘事业单位报名,4月8日起报名3月25日报名链接2018年江苏省属事业单位笔试报名网址http://222.190.11..._2018上半年江苏计算机事业编

Node.js调试大法 — v8_inspector_v8 sendinspectormessage-程序员宅基地

文章浏览阅读1.2k次。Node.js 调试基本原理Node.js 提供了强大的Debugger模块,使用方式如下:使用debug模式时,Node.js 会启动Debugger模块,然后通过监听默认 5858 端口将命令行的输入传送到内建调试模块以达到调试的目的。同时支持--debug 和 --debug-brk参数。这两个参数只会启动Debugger监听模式,不会进入命令行调试模式,而且前者会运行完所有代码,通常可用于..._v8 sendinspectormessage

[译]深度神经网络的多任务学习概览(An Overview of Multi-task Learning in Deep Neural Networks)...-程序员宅基地

文章浏览阅读857次。译自:http://sebastianruder.com/multi-task/1. 前言在机器学习中,我们通常关心优化某一特定指标,不管这个指标是一个标准值,还是企业KPI。为了达到这个目标,我们训练单一模型或多个模型集合来完成指定得任务。然后,我们通过精细调参,来改进模型直至性能不再提升。尽管这样做可以针对一个任务得到一个可接受得性能,但是我们可能忽略了一些信息,这些信息有助于在我们关..._clustered multi-task learning

【国内首发】 Virtualbox 4.1版本加入的新功能以及功能的详解--Professor哥-程序员宅基地

文章浏览阅读251次。近日在帮朋友做远程的时候发现Virtualbox 已经更新到4.1版本了(有点out.之前用的4.0.12)一开始觉得里面应该跟以往更行一样没多大改善,就修复几个bug而已! 但是我点进去才发现 变化可不小哦! 1、支持虚拟机的克隆; 2、改进了创建虚拟磁盘和复制虚拟磁盘的GUI界面; 3、64位主机的内存限制提升到1TB; 4、支持Linux主机下的PCI ..._virtualbox 4.1

推荐文章

热门文章

相关标签