< el-table > 表格
1. 设置列属性fixed导致fixed滚动条无法拖动问题
- 方法一（推荐）
// 可能是层级问题，使用样式穿透实现点击滚动条
.el-table {
&__fixed, &__fixed-right {
pointer-events: none;
td {
pointer-events: auto;
}
}
}
- 方法二（不推荐，会在问题2影响下失效）
// 可能是层级问题，提升层级解决
.el-table--scrollable-x .el-table__body-wrapper {
z-index: 2;
}
- 方法三（不推荐，空数据时会有样式问题）
// 可能是ex-table__fined过高导致
.el-table__fixed { // 左固定列
height: auto !important;
bottom: 16px;
}
.el-table__fixed-right { // 右固定列
height: auto !important;
bottom: 16px;
}
2. 滚动时开启fixed="right"的列左边框，阴影丢失
.el-table__fixed, .el-table__fixed-right {
z-index: 2;
}
3. 表格开启多选后，表头的全选框不能点击，表body都能正常勾选(前提，他右边的两列都开启了fixed)
- 原因：开启定位后，它自带了个禁止穿透，导致无法点击，改了就好了
解决办法：
::v-deep .el-table__fixed, .el-table__fixed-right {
// 这样写不行，虽然表头能正常勾选了，但是滚动条不能拖了
// pointer-events: auto;
// 精准到表头，问题解决~
.el-table__fixed-header-wrapper{
pointer-events: auto;
}
}
< el-input > 输入框
type = 'textarea'
1. 输入框内文字字体和普通input框字体不同
.el-textarea__inner{
font-family: auto;
}
< el-select > 选择器
1. 自己封装了个组件属性声明（如代码块一），然后就引发一个问题（远程搜索影响了filterable）：
场景描述：
- ①当远程搜索remote为false，使用select自带的filterable来筛选时，当在输入框输入无效内容（如图一），再点击空白处后，再次点击输入框，下拉区域没有任何可选项，如图（二）。（在点击空白处时不会触发@blur,但会触发@visible-change）
- ②远程搜索是正常的，点击空白后再点输入框正常展示下拉区域
代码块一
<el-select
clearable
v-model="value"
...(省略无关属性)
multiple
filterable
@change="isSelect"
:reserve-keyword="reserveKeyword"
:remote="remote"
:remote-method="remote ? remoteMethod : null"
>
图一
图二
解决办法：
<el-select
clearable
v-model="value"
...(省略无关属性)
multiple
filterable
@change="isSelect"
:reserve-keyword="reserveKeyword"
:remote="remote"
:remote-method="remote ? remoteMethod : null" // 加了个判断：当不使用远程搜索时，就给这个方法传null，避免影响默认筛选
>
2. 自己封装了个下拉组件实现列表虚拟滚动功能，导致表单校验触发失败：
场景描述：
-
① 使用的是
vue-virtual-scroll-list插件（由于用了这个插件，导致要重写filter和remote）,代码结构如下：<el-select ...属性... > <virtual-list ...属性... /> </el-select> -
② 表单使用的el-form，rules代码如下：
type: [ {required: true, message: '请选择类型', trigger: 'change'} ], -
③ 在进行多选时，先选择了一个，然后点击右侧的清空icon，此时正常触发校验。再次点击下拉框，选择一个，依然提示'请选择类型'，当再选择第二个后，校验成功，不再提示。(通过打印得知，当前表单的值已正常赋值并且也没有丢失属性的响应式，但就是没次只有第二次才会触发表单的校验)
-
④ 不想写自定义校验方法，来规避这个问题
解决办法：
-
最后百度了半天，得知是封装的太深了，导致
el-form的chang有时候监听不到变化，所以在封装的组件的change事件里手动触发el-form的change事件即可this.$parent.$emit('el.form.change');
