方法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...
在Element UI中,Table组件是支持横向滚动条的。当表格内容超出容器宽度时,会自动显示横向滚动条。以下是如何在Element UI Table组件中实现横向滚动条功能的详细步骤: 确认Element UI Table组件支持横向滚动条: Element UI的Table组件确实支持横向滚动条功能。当表格的列宽度总和超过容器宽度时,会自动出现横向滚动条。 查...
当数据过多,table的X轴滚动条不在可视区域时,给table的父级容器添加一个滚动条perfectScrollbar,然后将perfectScrollbar的scroll值赋值给table自己的滚动条 代码实现 (1).tableDemo.vue <template> <div> <el-row type="flex" justify="end"> <el-col :span="6"> <el-button type="primary" @click="g...
/*** 表格滚动条*/// 横向滚动条高度$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...
通过浏览器中调试,发现将.el-table__body-wrapper的overflow属性隐藏再显示,横向滚动条就不会出现了,应该是重新添加overflow: auto;使得浏览器自身重新计算了table的宽度,所以宽度足够的情况下不需要显示横向滚动条; 具体做法: <!--template--><el-table ref="configurationTable"border:data="data":height="height...
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即可实现想要...
可以通过给表格添加style属性来设置表格的宽度,例如: <el-table :data="tableData" style="width: 800px"> // 表格列配置 </el-table> 通过设置表格的宽度,可以让表格在超出容器宽度时出现横向滚动条。 2. 固定表头 通过设置表格的固定表头属性,可以让表头固定在表格顶部,表格内容部分出现横向滚动条,具体代码如...
当我们使用element table,有时我们需要部分的列固定,我们就给列添加了 fxied属性,但是这时候你会发现table的横向滚动条很难拖动,查找原因你会发现原来是固定的列把滚动条给挡住了,只有超出固定的部分滚动条才可以拖动。 解决办法 法一: 做法:修改el-table__fixed样式。
.el-table__body-wrapper{background-color:#ddd;}.el-table__body-wrapper::-webkit-scrollbar{width:8px!important;height:8px!important;} 或者参考以下的css样式代码: // 滚动条的宽度/deep/.el-table__body-wrapper::-webkit-scrollbar{width:8px;// 横向滚动条height:8px;// 纵向滚动条 必写}//...
大家可以发现,固定了高度的 table 不仅出现了纵向滚动条,横向滚动条也出现了(只能滚动一点点),其实宽度是足够显示的。 有一点和#78相似,我的 table 也是配置化的,表头和内容都是作为属性传过去,可能导致表格在初次渲染时宽度计算不准确,导致最后宽度超过了 2px(经查验是 border 的宽度);但解决方案不适用,一方面...