方法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...
<liv-for="(item, index) in tableData":key="index">{{ item.name }}</li> </ul> 对于不是真正的出现滚动条的标签,却无能为力 <el-table border height="400" v-infinite-scroll="load" :data="tableData" > <el-table-columnprop="date"label="日期"width="180"></el-table-column> <el-...
确定el-table组件是否支持横向滚动条功能: el-table 组件是支持横向滚动条的。当表格列的总宽度超过表格容器的宽度时,就会出现横向滚动条。 在el-table组件中添加必要的属性以启用横向滚动条: 通常不需要额外的属性来启用横向滚动条,只需要确保表格内容宽度超过容器宽度即可。不过,你可以通过 style 属性或外部 CSS 来...
因为el-table初始化的问题,初始化计算的时候最好做个延迟,或者监听宽度变化重设宽度,这里我实际代码两个都做了 /** * 自动设置Bar */ resetBar () { const { targetTableWrapperEl } = this const widthPercentage = (targetTableWrapperEl.clientWidth * 100 / targetTableWrapperEl.scrollWidth) const thumb...
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。如果表格只有一条数据...
第一步: 获取到当前滚动加载的el-table表格节点 注意的是 如果存在多个表格,用ref获取dom节点,需要指定为第一个, 并且是当前dom节点下的bodyWrapper...
::v-deep .el-table--scrollable-x .el-table__body-wrapper{overflow-x:hidden} 如果滚动条还要特殊样式,那就自己写吧 4. data 数据定义 tableWidth:{width:0},listLoading:false, 5. 请求 结构示意 js逻辑 方便复制 源码 setTimeout(()=>{if(this.$refs.myTable){this.tableWidth.width=this.$refs...
版本:2.15.13 el-table在使用合计功能及固定列功能的同时,由于固定列的结构是固定区域增加了div加上定位,用来盖住下面的内容。当使用了合计功能的时候滚动条的区域在el-table__body-wrapper会导致固定列区域下的滚动条被挡住,当固定区域较大数据量较多的情况下存在滚动
当el-table的数据条数过多的时候,我们就要固定el-table的表头,从而实现竖向滚动的效果,不过默认的滚动条样式不太好看,所以我们可以修改一下滚动条的样式。其实很简单,css加上样式设置即可。 修改前的滚动条样式 修改语句 // 设置滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 10...