el-table中增加滚动条,你可以按照以下步骤进行操作。el-table是Element UI库中的一个组件,它本身支持滚动条功能,你主要需要关注的是如何设置合适的属性来启用滚动条,并可能需要对CSS进行一些调整。 1. 启用滚动条 el-table组件提供了max-height属性,当表格内容超过这个高度时,会自动出现滚动条。你可以在Vue组件的...
方法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.表格...
el-table表格设置滚动条 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。如果表格只有...
2.监听表格宽度,并给元素和滚动条元素绑定滚动事件: 原理:两个滚动条滚动时,同时控制另一个滚动条滚动。 表格上下滚动条监听滚动距离 上下滚动条 ---滚动距离双向绑定 html: <divclass="top-scroll"ref="topScroll"><divclass="top-scroll-content":style="tableWidth"></div></div><el-tableref="tableDat...
const { top: tableTop } = tableBodyWrapper.getBoundingClientRect(); tableBodyWrapper.scrollTop += top - tableTop; // 滚动到展开行的位置 } } }); } else if (this.expandedRow === row) { // 当前行被收起 console.log(row) this.expandedRow = null; ...
工作中用到的el-table显示大批量数据的时候,一页放不下,一般性的处理方案是限定了高,让表格固定表头之后内部可以滚动,不过因为实际操作中样式的问题,需要我把整个表格高度全部显示出来,这样就造成了一个问题,就是横向滚动不方便 不过作为mac用户已开始没啥感觉,但是被用windows的同事吐槽了好久,于是终于决定花半天时...
$refs.two.bodyWrapper; // class="el-table__body-wrapper is-scrolling-left" 这个dom上。审查元素可知 console.log("滚动条dom容器", this.one); // 2. 绑定滚动事件,顺带加上一个节流函数吧,也算是性能优化 this.one.addEventListener( "scroll", _.throttle( function () { that.fn1(); // 85...
/*** 表格滚动条*/// 横向滚动条高度$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...