elementUI方案汇总
1：el-table 设置固定列，横向滚动条在固定列的位置上无法滚动的问题
问题原因：固定列将下方的滚动条盖住了，无法触发滚动条的滚动。
解决方法：改变固定列的样式，给固定列设置下边距，下边距的大小等于横向滚定条的高度
注意：这样改样式如果屏幕分辨率足够大无横向滚动条时，固定列下方就会多出一道横线，不美观，可以用样式去除
//给固定列设置下边距
.el-table {
.el-table__fixed {
height:auto !important;
bottom:8px !important; //具体值是多少根据你横向滚动条的高度进行设置
}
}
//去掉固定列下方的横线
.el-table__fixed::before, .el-table__fixed-right::before {
display:none;
}
2：el-table设置show-summary后横向滚动条放到合计的下方
问题原因：默认数据列过多后出现横向滚动条，但滚动条会放在show-summary上方，该觉有些怪
解决方法：该样式解决此问题
// 滚动区域样式
.el-table--scrollable-x .el-table__body-wrapper {
padding-bottom: 50px;
}
.el-table__footer-wrapper {
margin-top: -66px;//66 60
overflow-y: scroll !important;
}
.el-table__fixed-footer-wrapper {
padding-bottom: 15px;//15 9
}
.el-table__footer-wrapper {
&::-webkit-scrollbar {
opacity: 0;
}
/*滑块*/
&::-webkit-scrollbar-thumb {
opacity: 0;
}
/*轨道*/
&::-webkit-scrollbar-track {
opacity: 0;
}
/*按钮*/
&::-webkit-scrollbar-button {
opacity: 0;
}
}
3：el-table 刷新表格，解决样式错乱问题
可以在数据变化或者update()钩子函数中调用
this.$nextTick(() => {
this.$refs["scrollTable"].doLayout()
})
4：vue el-select封装一个滚动加载更多下拉选项的自定义指令
- 模板部分
<el-select
v-model="operator"
filterable
remote
size="small"
reserve-keyword
placeholder="请输入经办人姓名"
:remote-method="remoteOperate"
@change="selectOperateBlur"
v-load-more="loadMore"
>
<el-option
v-for="item in operatorList"
:key="item.operator_user_id"
:label="item.operator_true_name"
:value="item.operator_user_id"
>
</el-option>
</el-select>
- 自定义指令v-load-more编写
directives: {
loadMore: {
bind: function (el, binding) {
const SELECTWRAP_DOM = el.querySelector(
".el-select-dropdown .el-select-dropdown__wrap"
);
SELECTWRAP_DOM.addEventListener("scroll", function () {
const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
if (CONDITION) {
binding.value();
}
});
},
},
},
- 调用的处理函数
loadMore() {
//分页家内容
//TODO 请求借口
},