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 = 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创建一个完整的布局流程

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-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-buttontype="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-buttontype="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 ： 点击下一页事件

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

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

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

  <!-- 修改对话框 --><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的组件，首先去官网，找到你需要的样式的组件代码，直接拷贝进你的 项目所需位置处。

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

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