作者：TYANer
elementUI是和vue配套的一个桌面端组件库。虽然是一个通用的组件库，但是由于使用场景的不同，我们可能会遇到一些小问题，以下是我个人的一、、总结。
1、Tooptip文字提示
tooltip使用时，必须有一个子元素(不能是文本元素)。
2、修改主题色
2.1 方案一：利用element UI的在线主题生成工具
操作步骤：点击“切换主题色”，选择或输入色值。
点击“下载主题”。
将压缩包解压，将文件夹重命名，如“theme”。
将theme文件夹放到项目目录中。
在main.js 中修改elementUI的css的引用路径。
以“将theme放到main.js同级的目录”为例：
// 原来的引用路径// import 'element-ui/lib/theme-chalk/index.css'import '../theme/index.css'
这种方案的优点是：不需要安装新的依赖。缺点是：只能修改主题色，灵活度不够。
2.2 方案二：修改scss变量
操作步骤：新增一个样式文件，用于修改Element的样式变量
在文件中写入修改内容
在main.js中引入该样式文件需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。
以“在main.js同级的目录新建一个名为element-variables.scss的文件”为例：
element-variables.scss
/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
main.js
// 原来的引用路径
// import 'element-ui/lib/theme-chalk/index.css'
import './element-variables.scss'2.3 方案三：使用element-ui自定义主题工具
操作步骤：cd到你的项目文件目录下，安装工具：npm i element-theme -g。
安装chalk主题：npm i element-theme-chalk -D。
初始化变量文件：et -i 执行后当前目录会有一个 element-variables.css文件。
直接编辑element-variables.css文件，修改变量，例如主题色改为红色：--color-primary: red;。
编译主题：et。
引入自定义主题：import '../theme/index.css' import ElementUI from 'element-ui' import Vue from 'vue' Vue.use(ElementUI)。
3、使用隐藏组件el-scrollbar
使用方法和其他组件一样，不需要额外引入。
使用将会出现滚动的内容放到上述标签内就可以了。
这里要简单的设置一下，将标签的height设为100%。如果底部出现空白，可以通过设置以下代码解决(出现这种情况的原因是：底部出现了横向滚动条)。
.el-scrollbar__wrap {
overflow-x: hidden;
}
4、修改表头样式
方法一：
方法二：
/* template */
/* script */
methods: {
// 修改table tr行的背景色
tableRowStyle({ row, rowIndex }) {
return 'background-color: #F7F6Fd'
},
// 修改table header的背景色
tableHeaderColor({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return 'background-color: #F7F6Fd;color: #B6B5C2;font-weight: 500;'
}
}
}方法一的缺点是，有一些样式不能设置，比如background-color等。
5、表格加按钮产生的问题
由于浏览器的处理方式不同，在表格内嵌套文字按钮，当文字过长时，可能出现两种情况：按钮将表格撑开，表格无法对齐。
按钮只能显示表格宽度的内容，超过部分被隐藏。
解决办法：加上一个属性show-overflow-tooltip，这样显示的效果就会统一成“当内容过长被隐藏时显示 tooltip”。
6、表单验证：当A改变时，触发B的校验
设置A的自定义校验规则，并在A的校验中调用校验B的方法：
data() {
let validateA = (rule, value, callback) => {
if (this.formData.B !== '') {
this.$refs.formData.validateField('B')
}
callback()
}
return {
rules: {
A: [
{ validator: validateA, trigger: ['blur', 'change'] }
]
}
}
}7、多选下拉框样式显示不正常
现象描述：下面代码的目标是实现一个多选、可搜索、可清空的下拉框。实际效果是，可以多选、搜索，但是当鼠标放在下拉框上时，本该出现的清空全部的按钮并没有出现；另外，下拉框的选项还可能出现宽度变成由文本撑开、文本和icon重叠等现象。
/* template */
/* script */
formData: {
// formItem: [],
},原因：出现这种情况的原因是，下拉框绑定的对象没有显示定义，而多选的值是一个数组，读取数据的时候，如果未定义就是undefined，没有length属性，就会报错，引发后面的现象。
控制台报错：
[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"
TypeError: Cannot read property 'length' of undefined
[Vue warn]: Error in mounted hook: "TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'."
TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'.
[Vue warn]: Error in callback for watcher "value": "TypeError: Cannot read property 'value' of undefined"
TypeError: Cannot read property 'value' of undefined为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。
8、el-form中使用resetFields()方法不能将表单全部重置为空
场景描述：有两个button，分别为“新增”和“编辑”，点击按钮会出现一个包含表单的dialog(“新增”和“编辑”复用一个dialog)。
期望效果：点击按钮，dialog出现，关闭dialog时，清空校验结果和输入框内的值。
问题描述：点击“新增”按钮，关闭后，点击“编辑”按钮，得到期望结果；点击“编辑”按钮，关闭后，点击“新增”按钮，会出现点击“编辑”按钮时第一次赋的值。
原因描述：Form 的这个方法resetFields有问题，调用后不是重置为空，而是重置为第一次给form赋的值。
9、组件的Methods调用
在组件上添加ref属性，使用this.$refs.yourElementRefAttributeValue.methodName()调用。
以调用el-input的select方法为例：
// template
// script
this.$refs.sslKey.select()相关讨论：
10、调用resetFields()方法重置表单时，控制台警告：[Element Warn][Form]model is required for resetFields to work.
resetFields()对整个表单进行重置，将所有字段值重置为初始值并移除校验结果。
resetFields()源码：
resetFields() {
// 没有表单数据 return
if (!this.model) {
// 环境变量,非生产环境抛警告再return
process.env.NODE_ENV !== 'production' &&
console.warn('[Element Warn][Form]model is required for resetFields to work.');
return;
}
this.fields.forEach(field => {
field.resetField();
});
}由此可见，出现警告的原因就是，绑定的表单数据有问题。
附 表单的一些注意事项：在el-form上绑定数据，用:model="formData"，model和v-model不要弄混了。
要重置的表单项，必须添加prop属性，并且必须与form表单对应的变量名字一致。
一个表单里的prop必须唯一。
