PC端Element-UI使用指南

本文目录：

1.使用方法
2.全局引用
3.按需引入
4.element批量删除功能实现
5.element提供的上传组件解决无权限的问题
6.图片上传验证
7.同一页面存在多个表格
8.动态改变校验规则
9.手动控制校验状态
10.表单的使用
11.表格中获取所在行的数据

Element-UI：一套为开发者、设计师、产品经理准备的桌面端组件库。官方文档地址：https://element.eleme.cn/#/zh-CN/component/installation

1.使用方法

1.CDN的方式

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

引用之后直接就可以在页面中使用标签了。
2.基于命令行方式手动安装
①安装依赖包 npm install element-ui --save
②导入element-ui相关资源
3.基于图形化界面自动安装
①运行vue ui 命令，打开图形化界面
②通过Vue项目管理器，进入具体的项目配置面板
③点击插件=>添加插件，进入插件查询面板
④搜索vue-cli-plugin-element 并安装
⑤配置插件，实现按需导入，从而减少打包后的项目的体积

2.全局引用

如果项目的UI都是用的element，可以直接将element进行全局引用：

import Vue from 'vue';
//导入组件库
import ElementUI from 'element-ui';
//导入组件相关样式
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)
});

然后根据官方文档上的说明，直接在把相应组件的代码拷贝进页面中就可以了。

3.按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 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 中写入以下内容：

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);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

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

这个时候，style 引用可以去掉。

4.element批量删除功能实现

在el-table标签中绑定事件 @selection-change="batchRemove"
batchRemove(val){
console.log(val)
},
打印出来的是选中的列的数组集合

5.element提供的上传组件解决无权限的问题

解决思路：手动设置请求头
1.定义变量，获取token
const token = localStorage.getItem("access-token");
2.在data中设置要改变的请求头的信息MyHeader
MyHeader: { Authorization: token }
3.组件中动态传入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">点击上传
  </el-button>
</el-upload>

6.图片上传验证

有时候会需要在表单里上传图片,但是图片上传是一个异步过程,属性值改变后不会去触发验证规则，这时候需要手动触发部分验证方法。

<el-form-item label="活动图片" 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: '请上传图片', trigger: 'change' }
  ],

  // 删除图片
  handleRemove (file, fileList) {
    this.registData.fileUrl = ''
    // 文件删除后也要触发验证,validateField是触发部分验证的方法,参数是prop设置的值
    this.$refs.registerRef.validateField('fileUrl')
  },

  // 图片上传
  handleSuccess (res, file, fileList) {
    // 这里可以写文件上传成功后的处理,但是一定要记得给fileUrl赋值
    this.registData.fileUrl = 'fileUrl'
    // 文件上传后不会触发form表单的验证,要手动添加验证
    this.$refs.registerRef.validateField('fileUrl')
  },

7.同一页面存在多个表格

element-ui在同一个页面放置多个table表格可能会出现一个莫名其妙的BUG，比如说表格布局乱了，不同表格内容相互覆盖，可以给el-table标签绑定 :key="Math.random()"解决问题。
<el-table :key="Math.random()"></el-table>
key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。
另外使用了图片懒加载的时候，假如列表发生变化而图片没刷新的话，也可以尝试动态绑定key值。
在el-table表格中，如果需要获取到当前行的所有数据，需要在<template slot-scope="scope"></template>内通过scope.row获取。

8.动态改变校验规则

表单校验如通过指定el-form-item 的 prop 属性<el-form-item label="审批人" prop="user">，接下来在rules中定义user规则

{
  rules: {
      user: [
        { required: true, trigger: 'change', message: '用户名必须录入' },
      ]
  }
}

上面的rules 只包含一个校验规则，接下来我们可以通过Object.assign给rules动态添加规则

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

9.手动控制校验状态

el-form-item有一个validate-statu属性，并且有以下可选值：
success：验证成功
error：验证失败
validating：验证中
(空)：未验证
el-form-item还有个error属性，可以自定义错误提示
我们可以通过在data中自定义demotips和demostatu来手动控制校验状态。
首先设置好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绑定数据，同时el-form需要添加ref属性，相当于给表单起了个专属的名字，这个名字很重要，如 ref="addForm"
操作表单

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

11.表格中获取所在行的数据

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