Element-UI详解

Element-UIElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库Element UI是基于Vue 2.0的Element UI 提供一组组件Element UI 提供组件的参考实例, 直接复制安装ElementUI通过 vue-cli创建vue项目安装 element-ui组件npm i element-ui配置...

一名努力的小码农

174286人浏览 · 2019-11-06 09:05:27

一名努力的小码农 · 2019-11-06 09:05:27 发布

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

清空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>

导航菜单详解：
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">
  
      <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无法触发效果