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 60overflow-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-selectv-model="operator"filterableremotesize="small"reserve-keywordplaceholder="请输入经办人姓名":remote-method="remoteOperate"@change="selectOperateBlur"v-load-more="loadMore"><el-optionv-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 请求借口},