el-table是Element UI库中的一个组件,它本身支持滚动条功能,你主要需要关注的是如何设置合适的属性来启用滚动条,并可能需要对CSS进行一些调整。 1. 启用滚动条 el-table组件提供了max-height属性,当表格内容超过这个高度时,会自动出现滚动条。你可以在Vue组件的data中定义一个高度值,然后将其绑定到el-table的max-...
方法1、在el-table上手动添加滚动条 1、在el-table上方添加一个div,div的宽度和表格的宽度相同。 <div ref="topScroll" class="top-scroll"> <div class="top-scroll-content" :style="{ width: topScrollWidth }"></div> </div> <el-table ref="tableRef" :data="list" v-loading.body="listLoad...
-- table属性自己写 --><el-tableclass="mt-1"ref="myTable":data="tableData"v-loading="listLoading"></el-table> 3. 样式 顶部滚动条 .top-scroll{overflow-y:hidden;overflow-x:auto; .top-scroll-content{background-color:#FFF;height:1px;}} 底部滚动条 我的需求是这个底部滚动条就不要了 如...
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.表格...
{ // opacity: 1; // 默认滚动条自带透明度 height: $scrollbarheight ; // 横向滑块的宽度 border-radius: 5px; // 圆角度数 // background-color: var(--el-color-primary-light-4); // 滑块背景色 // box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); // 滑块阴影 } // 纵向滚动条 .el-...
// el-table标签里设置height为100%height="100%"// 设置最高高度,并隐藏溢出部分style="width: 100%;max-height: 600px;overflow: auto;"// 右上角缺失部分填充颜色/deep/.el-table.el-table__cell.gutter{background-color:#B5DBF0!important;}...
}); //跳到顶部操作 this.$refs.containerTable.bodyWrapper.scrollTop =0 //可根据页面高度设置 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 参考: 2021-12-10 el-table 行内新增,滚动条自动滚到最顶部,或者最底部
当el-table的数据条数过多的时候,我们就要固定el-table的表头,从而实现竖向滚动的效果,不过默认的滚动条样式不太好看,所以我们可以修改一下滚动条的样式。其实很简单,css加上样式设置即可。 修改前的滚动条样式 修改语句 // 设置滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 10...
在Element UI Plus中,`el-table`组件用于显示表格数据。要调整表格滚动条的样式,你可以使用一些自定义样式来覆盖默认的样式。 以下是一个基本的示例,展示了如何使用自定义样式修改Element UI Plus中`el-table`组件的滚动条样式: ```html <template> <el-table :data="tableData" style="width: 100%" height=...
原理:两个滚动条滚动时,同时控制另一个滚动条滚动。 表格上下滚动条监听滚动距离 上下滚动条 ---滚动距离双向绑定 html: <divclass="top-scroll"ref="topScroll"><divclass="top-scroll-content":style="tableWidth"></div></div><el-tableref="tableData2":data="tableData"class="e-table"@selection-...