如果默认的横向滚动条不满足需求,可以考虑以下几种定制方式: 使用CSS样式:通过CSS自定义滚动条的样式,如颜色、宽度等。 使用第三方库:如提到的v-horizontal-scroll指令,这是一种通过Vue指令来实现横向滚动条自定义的方法。 监听滚动事件:通过监听滚动事件来实现一些自定义的滚动效果,如拖拽滚动等。4...
滑槽因为默认的样式是opacity: 0所以我顺手做了el根据鼠标事件自动显示和隐藏 滑块主要是需要计算宽度和向左滑动的距离 #宽度计算 代码如下,我直接放类里面了,具体targetTableWrapperEl是哪个dom可以自己看一下具体的dom结构,表格的容器,因为宽度不变,所以滑块的宽度我们通过可滚动距离和容器宽度换算成一个百分比 因为e...
length;// tr的个数 fixTabScrollbar(el,null,trCount) } }) //自定义app滚动事件 Vue.directive('appScroll', { bind: function(el, binding, vNode) { let start = (e) =>{ fixTabScrollbar(null,el) } // 添加事件监听器 el.addEventListener("scroll", start); } }) //app滚动->定位table...
2、给滚动条设置初始值 data(){ return{ topScrollWidth: 0, tableDom: null, } }, methods:{ setScrollWidth() { //设置顶部滚顶条宽度值为表格的滚动宽度 this.$nextTick(() => { this.topScrollWidth = this.$refs.tableRef.bodyWrapper.scrollWidth + 'px'; }) }, getList(){ //在获取数据...
1.这里涉及到两个Dom元素,类名分别为el-table__body-wrapper、el-table__body通过观察发现横向滚动条在于el-table__body-wrapper上,el-table__body则是实际的列表内容,当el-table__body宽度超出el-table__body-wrapper时就会出现横向滚动条。 2.因此只需要动态的修改el-table__body-wrapper的height即可实现想要...
el-table可以手动调整列宽,当拉得非常宽的时候会出现横向滚动条 1.css设置不显示横向滚动条 /* 表格不出现横向滚动条 */.el-table--scrollable-x.el-table__body-wrapper{overflow-x: hidden; } 2.设置最大列宽,查阅element官网文档,header-dragend事件可以查看修改前后的列宽 ...
需要三个事件 onmousemove onmouseup onmousedown 注意点 mousemove建议挂在document上 右键+ ctrl这类特殊情况需要处理 #计算距离 通过可以得出每次滚动的, 但是这个需要换算成具体需要滚动的 然后每个像素的对应的比例,其实可以通过滑块和滑槽的比例直接算出来(两者同样出自容器) ...
(); }, true);//滚动条事件 }) <style lang="scss"> .table-overflow-x { .el-table th.gutter{ display: none; width: 0!important; } .el-table colgroup.gutter{ display: none; width: 0!important; } .el-table--scrollable-x .el-table__body-wrapper { overflow-x: unset!important; }...
$refs.one.bodyWrapper; // 获取带有滚动条的dom元素,注意饿了么UI的el-table的横向滚动条是设置在类名为 this.two = this.$refs.two.bodyWrapper; // class="el-table__body-wrapper is-scrolling-left" 这个dom上。审查元素可知 console.log("滚动条dom容器", this.one); // 2. 绑定滚动事件,顺带...
我用el-table没有碰到过e这个问题,但在用vue3加antd的checkbox时遇到了类似的问题,排查后发现antd的checkbox中有一个input,点击时label会对input获取焦点,导致页面横向滚动条自动重置(实际是自动滚动到input所在位置) 博主可以试着排查下,你的勾选操作是不是也触发了类似input获取焦点之类的事件 ...