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的方式

引用之后直接就可以在页面中使用标签了。
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问题。

  点击上传
  

6.图片上传验证

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

    
      
    
  

  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()"解决问题。

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。
另外使用了图片懒加载的时候，假如列表发生变化而图片没刷新的话，也可以尝试动态绑定key值。
在el-table表格中，如果需要获取到当前行的所有数据，需要在内通过scope.row获取。

8.动态改变校验规则

表单校验如通过指定el-form-item 的 prop 属性，接下来在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属性

自定义改变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.表格中获取所在行的数据