本文目錄：

• 1.使用方法
• 2.全局引用
• 3.按需引入
• 4.element批量刪除功能實(shí)現(xiàn)
• 5.element提供的上傳組件解決無(wú)權(quán)限的問題
• 6.圖片上傳驗(yàn)證
• 7.同一頁(yè)面存在多個(gè)表格
• 8.動(dòng)態(tài)改變校驗(yàn)規(guī)則
• 9.手動(dòng)控制校驗(yàn)狀態(tài)
• 10.表單的使用
• 11.表格中獲取所在行的數(shù)據(jù)

Element-UI：一套為開發(fā)者、設(shè)計(jì)師层扶、產(chǎn)品經(jīng)理準(zhǔn)備的桌面端組件庫(kù)琳袄。官方文檔地址：https://element.eleme.cn/#/zh-CN/component/installation

1.使用方法

1.CDN的方式

<!-- 引入樣式 -->
<link rel="stylesheet" >
<!-- 引入組件庫(kù) -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

引用之后直接就可以在頁(yè)面中使用標(biāo)簽了劳跃。
2.基于命令行方式手動(dòng)安裝
①安裝依賴包 npm install element-ui --save
②導(dǎo)入element-ui相關(guān)資源
3.基于圖形化界面自動(dòng)安裝
①運(yùn)行vue ui 命令包蓝，打開圖形化界面
②通過Vue項(xiàng)目管理器，進(jìn)入具體的項(xiàng)目配置面板
③點(diǎn)擊 插件=>添加插件 搁拙， 進(jìn)入插件查詢面板
④搜索vue-cli-plugin-element 并安裝
⑤配置插件云挟，實(shí)現(xiàn)按需導(dǎo)入，從而減少打包后的項(xiàng)目的體積

2.全局引用

如果項(xiàng)目的UI都是用的element哺哼，可以直接將element進(jìn)行全局引用：

import Vue from 'vue';
//導(dǎo)入組件庫(kù)
import ElementUI from 'element-ui';
//導(dǎo)入組件相關(guān)樣式
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
//配置vue插件
Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

然后根據(jù)官方文檔上的說明佩抹，直接在把相應(yīng)組件的代碼拷貝進(jìn)頁(yè)面中就可以了。

3.按需引入

借助 babel-plugin-component取董，我們可以只引入需要的組件棍苹，以達(dá)到減小項(xiàng)目體積的目的。
首先甲葬，安裝 babel-plugin-component：
npm install babel-plugin-component -D
然后廊勃，將 .babelrc 修改為：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下來，如果你只希望引入部分組件经窖，比如 Button 和 Select坡垫，那么需要在 main.js 中寫入以下內(nèi)容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或?qū)憺? * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

這個(gè)時(shí)候，style 引用可以去掉画侣。

4.element批量刪除功能實(shí)現(xiàn)

在el-table標(biāo)簽中綁定事件 @selection-change="batchRemove"
batchRemove(val){
console.log(val)
},
打印出來的是選中的列的數(shù)組集合

5.element提供的上傳組件解決無(wú)權(quán)限的問題

解決思路：手動(dòng)設(shè)置請(qǐng)求頭
1.定義變量冰悠，獲取token
const token = localStorage.getItem("access-token");
2.在data中設(shè)置要改變的請(qǐng)求頭的信息MyHeader
MyHeader: { Authorization: token }
3.組件中動(dòng)態(tài)傳入headers，即可解決401問題配乱。

<el-upload class="upload-area" action="http://192.168.0.88:18002/api-operate/clouddocms/files/upload" :headers="MyHeader">
  <el-button icon="el-icon-upload" size="primary" type="primary">點(diǎn)擊上傳
  </el-button>
</el-upload>

6.圖片上傳驗(yàn)證

有時(shí)候會(huì)需要在表單里上傳圖片,但是圖片上傳是一個(gè)異步過程,屬性值改變后不會(huì)去觸發(fā)驗(yàn)證規(guī)則溉卓，這時(shí)候需要手動(dòng)觸發(fā)部分驗(yàn)證方法皮迟。

<el-form-item label="活動(dòng)圖片" prop="fileUrl">
    <el-upload
      :action="action"
      :on-success="handleSuccess"
      :data="uploadData"
      :limit="20"
      list-type="picture-card"
      :on-preview="handlePreview"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
  </el-form-item>

  fileUrl: [
    { required: true, message: '請(qǐng)上傳圖片', trigger: 'change' }
  ],

  // 刪除圖片
  handleRemove (file, fileList) {
    this.registData.fileUrl = ''
    // 文件刪除后也要觸發(fā)驗(yàn)證,validateField是觸發(fā)部分驗(yàn)證的方法,參數(shù)是prop設(shè)置的值
    this.$refs.registerRef.validateField('fileUrl')
  },

  // 圖片上傳
  handleSuccess (res, file, fileList) {
    // 這里可以寫文件上傳成功后的處理,但是一定要記得給fileUrl賦值
    this.registData.fileUrl = 'fileUrl'
    // 文件上傳后不會(huì)觸發(fā)form表單的驗(yàn)證,要手動(dòng)添加驗(yàn)證
    this.$refs.registerRef.validateField('fileUrl')
  },

7.同一頁(yè)面存在多個(gè)表格

element-ui在同一個(gè)頁(yè)面放置多個(gè)table表格可能會(huì)出現(xiàn)一個(gè)莫名其妙的BUG，比如說表格布局亂了桑寨，不同表格內(nèi)容相互覆蓋伏尼，可以給el-table標(biāo)簽綁定 :key="Math.random()"解決問題。
<el-table :key="Math.random()"></el-table>
key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法尉尾，在新舊 nodes 對(duì)比時(shí)辨識(shí) VNodes爆阶。如果不使用 key，Vue 會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試修復(fù)/再利用相同類型元素的算法沙咏。
另外使用了圖片懶加載的時(shí)候辨图，假如列表發(fā)生變化而圖片沒刷新的話，也可以嘗試動(dòng)態(tài)綁定key值肢藐。
在el-table表格中故河，如果需要獲取到當(dāng)前行的所有數(shù)據(jù)，需要在<template slot-scope="scope"></template>內(nèi)通過scope.row獲取吆豹。

8.動(dòng)態(tài)改變校驗(yàn)規(guī)則

表單校驗(yàn)如通過指定el-form-item 的 prop 屬性<el-form-item label="審批人" prop="user">鱼的，接下來在rules中定義user規(guī)則

{
  rules: {
      user: [
        { required: true, trigger: 'change', message: '用戶名必須錄入' },
      ]
  }
}

上面的rules 只包含一個(gè)校驗(yàn)規(guī)則，接下來我們可以通過Object.assign給rules動(dòng)態(tài)添加規(guī)則

addRule() {
    const userValidator = (rule, value, callback) => {
      if (value.length > 3) {
        this.inputError = ''
        this.inputValidateStatus = ''
        callback()
      } else {
        callback(new Error('用戶名長(zhǎng)度必須大于3'))
      }
    }
    const newRule = [
      ...this.rules.user,
      { validator: userValidator, trigger: 'change' }
    ]
    this.rules = Object.assign({}, this.rules, { user: newRule })
}

9.手動(dòng)控制校驗(yàn)狀態(tài)

el-form-item有一個(gè)validate-statu屬性瞻讽，并且有以下可選值：
success：驗(yàn)證成功
error：驗(yàn)證失敗
validating：驗(yàn)證中
(空)：未驗(yàn)證
el-form-item還有個(gè)error屬性鸳吸，可以自定義錯(cuò)誤提示
我們可以通過在data中自定義demotips和demostatu來手動(dòng)控制校驗(yàn)狀態(tài)。
首先設(shè)置好el-form-item屬性

<el-form-item
  label="用戶名"
  prop="user"
  :error="demotips"
  :validate-status="demostatus"
......
</el-form-item>

自定義改變demotips和demostatus的方法

showError() {
  this.demostatus = 'error'
  this.demotips= '用戶名輸入有誤'
},
showSuccess() {
  this.demostatus = 'success'
  this.demotips= ''
},
showValidating() {
  this.demostatus= 'validating'
  this.demotips= ''
}

10.表單的使用

el-form通過:model綁定數(shù)據(jù)速勇，同時(shí)el-form需要添加ref屬性晌砾，相當(dāng)于給表單起了個(gè)專屬的名字，這個(gè)名字很重要烦磁，如 ref="addForm"
操作表單

this.$refs.addForm.validate(valid => {
  if (valid) {
    //some operate code
  }
});

11.表格中獲取所在行的數(shù)據(jù)

<el-table-column
  fixed="right"
  label="操作"
  width="100">
  <template slot-scope="scope">
    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
    <el-button type="text" size="small">編輯</el-button>
  </template>
</el-table-column>