Element-ui组件踩坑记录-继续踩坑继续记录
1.组件交互页面抖动：
出现问题：
组件操作时，页面会出现抖动情况，文字会模糊；
解决方法：
1）Checkbox 多选框切换：
.el-checkbox__inner::after {
transition: none!important;
}
2）表单验证信息出现时：
.reprint-remark-form .el-form-item__error {
transition: none!important;
}
3）单选框选中时：
.el-radio ::after {
transition: none!important;
}
4）下拉框触发时：
.el-icon-caret-right {
transition: none!important;
}
5）el-tab标签页切换时：
.el-tabs__active-bar {
transition: none!important;
}
6）输入框或其他组件icon：
.el-input__icon {
transition: none!important;
}
2.组件属性：
出现问题：
按照文档给组件添加属性，组件不能实现文档效果；
问题原因：
element组件更新了很多版本，查看的文档版本高于项目中安装的组件版本；
解决方法：
1）打开package.json文件，查看element-ui版本号；
2）切换文档版本与安装版本保持统一，查看当前组件是否有此属性应用，确认是否是版本原因导致；
3）确认版本原因，重新安装element-ui
// 卸载旧版本
npm uninstall element-ui
// 安装最新版本
npm i element-ui -S
// 安装目标版本
npm install element-ui @2.0.11 -S
3.组件样式修改：
出现问题：
F12里组件修改的样式，放在vue的style里不起作用
问题原因：
在vue项目的style里，使用了scoped属性，实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块，但是此时再修改组件样式不起作用。
解决方法：
1）删掉scoped属性，为防止样式污染，设置当前页面的唯一class类名包裹全部样式；
2）使用深度选择器:
a.使用>>>：（此方法适用于style的lang为css语言时）
<style scoped>
外层 >>> 第三方组件类名{
样式
}
</style>
b.使用/deep/：（有些Sass 、Less之类的预处理器无法正确解析 >>>，此时应用/deep/）
<style lang="sass" scoped>
/deep/ 第三方组件类名 {
样式
}
</style>
c.使用v-deep：（最优用法，/deep/在某些时候会报错，::v-deep更保险并且编译速度更快）
注：切记必须是双冒号
::v-deep 第三方组件类名 {
***
}
4.select下拉框：
出现问题：
在移动端使用element下拉框时，宽度非常大显示不全，就增加了popper-append-to-body:false的属性来修改，结果下拉框不能再随着屏幕滚动上下显示了。
问题原因：
popper-append-to-body的作用是“是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false”，当未添加popper-append-to-body属性时，下拉框在app外层，无法修改样式，如下图：
添加popper-append-to-body属性后，可以修改样式，但是会出现下图遮挡情况：
解决方法：
1）删掉popper-append-to-body属性；
2）给el-option组件添加样式，该方法目前只能逐一添加，再考虑其他方法；
<el-select v-model="form.main_dept_id"
:disabled="addType === 'A' || addType === 'D'"
size="mini"
filterable
popper-class="add-select"
placeholder="暂无">
<el-option
:style="optionStyle"
:title="item.name"
v-for="(item, index) in mainDept"
:key="index"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
data() {
return {
optionStyle: 'max-width: 80vw;'
}
}