给两个div添加样式,里面的div一定要设置高度,不设置的话滚动条出不来 .top-scroll { width: 100%; overflow-x: auto; } .top-scroll-content { /* 高度不设置的话滚动条出不来 */ height: 1px; } 1. 2. 3. 4. 5. 6. 7. 8. 2、给滚动条设置初始值 data(){ return{ topScrollWidth: 0, ...
el-table超出一定高度设置滚动条两种方法,设置height和max-height都可出现滚动条。 1、给table设置height属性为250,表格固定有300px这么高。 <el-table:data="tableData"height="250"border style="width: 100%"> 2、给他变了设置max-height为300,表格数据超出250。如果表格只有一条数据,且高度没有超过300.表格...
/*** 表格滚动条*/// 横向滚动条高度$scrollbarheight: 15px;.el-scrollbar{//偏移.el-scrollbar__bar{bottom:1px;}//高度.el-scrollbar__bar.is-horizontal{height:$scrollbarheight;}// 横向滚动条.el-scrollbar__bar.is-horizontal .el-scrollbar__thumb{// opacity:1;// 默认滚动条自带透明度heig...
顶部滚动条 .top-scroll{overflow-y:hidden;overflow-x:auto; .top-scroll-content{background-color:#FFF;height:1px;}} 底部滚动条 我的需求是这个底部滚动条就不要了 如果想要 上下双滚动条, 这个不写就行 ::v-deep .el-table--scrollable-x .el-table__body-wrapper{overflow-x:hidden} ...
[element-ui] el-table组件滚动条的宽度设置 1. 2. 3. 4. 5. 6. 参考: elementUI——el-table组件滚动条的宽度设置——css基础
当el-table的数据条数过多的时候,我们就要固定el-table的表头,从而实现竖向滚动的效果,不过默认的滚动条样式不太好看,所以我们可以修改一下滚动条的样式。其实很简单,css加上样式设置即可。 修改前的滚动条样式 修改语句 // 设置滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 10...
当我们使用element table,有时我们需要部分的列固定,我们就给列添加了 fxied属性,但是这时候你会发现table的横向滚动条很难拖动,查找原因你会发现原来是固定的列把滚动条给挡住了,只有超出固定的部分滚动条才可以拖动。 解决办法 法一: 做法:修改el-table__fixed样式。 效果:就是设置bottom值,使得不盖住滚动条。
headerHeight : 0)) + 'px' }; } } return {height: '100%'}; }, // 这个方法就用到了scrollbarWidth,当el-table设置height为固定高度时,el-scroll-wrap的100%和固定高度一样,导致margin-bottom失效,这里直接把el-scroll-wrap的高度算好,是el-table固定高度加上滚动条宽度 bodyScrollWrapHeight() { ...
支持设置滚动到底部的偏移量 支持防抖 完整代码: <template> <div> <el-table border height="400" :data="visibleData" :row-key="getRowKeys" v-load-more.expand="{func: loadmore, target: '.el-table__body-wrapper', delay: 300}" :load-more-disabled="disabledLoad" ...