const table=this.$refs.table;//拿到表格中承载数据的div元素const divData =table.bodyWrapper;//拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)setInterval(() =>{//元素自增距离顶部1像素divData.scrollTop += 1;//判断元素是否滚动到底部(可视高度+距离顶部=整个高...
一、概述 在表格宽度固定时,实现内容不换行,表格自动显示滚动条 当前显示效果: 期望实现效果: 二、实现思路 遍历表格数组,每次都构建一个隐藏的span元素,获取该元素的宽度,对比保存最大值 代码如下: /** * 表格列宽自适应 * @param prop 属性 * @param records
1、首先去除掉原有element-ui的滚动条 找到el-table__body-wrapper类,添加样式,这里也要考虑到兼容问题 .el-table__body-wrapper::-webkit-scrollbar { display: none; } .el-table__body-wrapper::-o-scrollbar { display: none; } .el-table__body-wrapper::-moz-scrollbar { display: none; } 1....
let elwrapper = el.getElementsByClassName("el-table__body-wrapper")[0]; //console.log("容器:", elwrapper); //设置容器高度,50固定不要随意修改 elwrapper.style.height = options.maxNumner * 50 + "px"; //获取表格主体 let elBody = elwrapper.getElementsByClassName("el-table__body")[0];...
产品想要的效果是:内容保持单行显示,列间距保持一致,表格超出容器允许水平滚动。el-table-column是支持设置固定宽度的,在内容宽度可预知的情况下,也能满足这个需求。问题就在于如何让列宽动态适应内容的宽度。在官方文档也没找到这样的选项,应该是组件本身不支持。
当el-table的数据条数过多的时候,我们就要固定el-table的表头,从而实现竖向滚动的效果,不过默认的滚动条样式不太好看,所以我们可以修改一下滚动条的样式。其实很简单,css加上样式设置即可。 修改前的滚动条样式 修改语句 // 设置滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 10...
如果你想修改element-ui中的表格el-teble的滚动条样式,可以参考一下以下的css样式代码: .el-table__body-wrapper{background-color:#ddd;}.el-table__body-wrapper::-webkit-scrollbar{width:8px!important;height:8px!important;} 或者参考以下的css样式代码: ...
1、从github上clone element-ui源码到本地 2、找到packages/table/src/table.vue,插入以下代码 // 导入el-scrollbar组件 import ElScrollbar from 'element-ui/packages/scrollbar'; // 获取浏览器滚动条宽度方法 import scrollbarWidth from 'element-ui/src/utils/scrollbar-width'; ...
.el-table .el-scrollbar__wrap { border-radius: 0px !important; /*滚动条边框的圆角大小*/ border: 1px solid #e4e4e4 !important; /*滚动条边框的颜色*/ } 请将以上CSS代码添加到您的项目中的CSS文件中,并根据需要修改样式。 记住,使用`!important`可以覆盖ElementUI默认样式,确保您的样式生效。©...