Element-UI详解

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 首页中。这里使用侧栏菜单

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中的某个 数组数据，循环出一个具体的表现表格

  • :data ： 对应data中的数据，要循环数组，遍历的数据
  • el-table-column : 为一列数据，多个el-table-column就可以组成table的一行数据 。
  • label ： 为列的标头，
  • prop ： 如果循环数据是对象，对应的就是每一个对象的 属性
  • width ： 当前列的宽度

• 具体的显示效果

---

点击修改按钮，获取每一行数据的id

• scope.row 。 可以将当前一行数据的对象 传入到方法的形参中

• 需要在 定义一个 template 父标签， 并加入 slot-scope="scope"属性

• type ： 指定按钮以什么形式展示， text超链接文本形式，不写type，则以原生的 button按钮展示

• size ： 指定按钮大小， small小的 mini最小 medium大的

• methods中 getByBid 方法，接收的形参，就是当前这行数据的对象，拥有这行所有的数据

• 即可完成，修改回显

---

复选框按钮点击，将选中的 数据对象传入到data中

• 写一个复选框，在 el-table-column的属性上 type=selection表示为一个复选框

• 复选框选中，将当前数据 保存到 data的某个属性中

• 在 父标签 el-table 加入属性 @selection-change=“handleSelectionChange”

• handleSelectionChange为data中的属性名，为一个数组

• 当复选框选中时，当前行的数据对象，会传入到 属性handleSelectionChange中

---

table表格中 加入分页操作

• 在 el-table 结束后， 加入分页的代码

  • ：total ： 指定分页的总页数，从data中获取， 需要*10 ； 80
    表示8页，需要int类型，如果后台传入的是字符串，要Number(val)转换
  • @current-change ： 当点击某一页数时，调用方法
  • @prev-click ： 点击上一页事件
  • @next-click ： 点击下一页事件

• 分页中的数据出发后，调用的函数，形参中会自动赋值，点击的页数

---

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

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

    
    
  
        
        
            
            
            
        
        
  
            取 消
            确 定
        
        
    
  

  • el-dialog ： 定义一个对话框
  • v-model ： 双向绑定数据，回显数据
  • ：visible.sync = 根据 dialogFormVisible 属性的boolean值，判断是否显示。 true为显示 ， false为隐藏

---

模糊查询，表格中搜索框

• 在elementUI的官网中，表格中有一个 自定义表头的样式，具有条件搜索框

  • template ： 模块代码，一般的代码如果不以属性写入 el-column中，就要写在此中

  • slot ： 设置为 header， 为当前为标头

  • slot-scope ： 绑定当前列行数据，不加此属性，文本框无法输入

  • el-input ： 文本输入框，双向绑定一个 属性数据

  • @keyip.native ： 绑定键盘按起事件，输入字符之后，直接调用函数，查询条件数据

  • .native ： el-input 封装过硬件（键盘，鼠标）的触发事件，不加 .vative无法触发效果

总结

• 使用elementUI的组件，首先去官网，找到你需要的样式的组件代码，直接拷贝进你的 项目所需位置处。

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

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