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;'
    }
}