黄江建设网站,seo排名赚app最新版本,沪深300指数是什么意思,网站排名突然没有了当table内容列过多时#xff0c;可通过height属性设置table高度以固定table高度、固定表头#xff0c;使table内容可以滚动。 现在需求是右侧滚动条不好看#xff0c;需要去除滚动条#xff0c;并隐藏滚动条所占列的位置。让他可以滚动但是不出现滚动条,不然即时隐藏了滚动…当table内容列过多时可通过height属性设置table高度以固定table高度、固定表头使table内容可以滚动。 现在需求是右侧滚动条不好看需要去除滚动条并隐藏滚动条所占列的位置。让他可以滚动但是不出现滚动条,不然即时隐藏了滚动条也会有一个空白列影响占位的。
// ----------修改elementui表格的默认样式-----------
.el-table__body-wrapper {::-webkit-scrollbar { // 整个滚动条width: 0; // 纵向滚动条的宽度background: rgba(213,215,220,0.3);border: none;}::-webkit-scrollbar-track { // 滚动条轨道border: none;}
}
// --------------------隐藏table gutter列和内容区右侧的空白 start
.el-table th.gutter{display: none;width:0
}
.el-table colgroup col[namegutter]{display: none;width: 0;
}
.el-table__body{width: 100% !important;
}
// --------------------隐藏table gutter列和内容区右侧的空白 end如果样式不想影响全局可以使用样式穿透
::v-deep .el-table__body-wrapper {// 整个滚动条::-webkit-scrollbar {width: 0px; // 纵向滚动条的宽度background: rgba(213, 215, 220, 0.3);border: none;}// 滚动条轨道::-webkit-scrollbar-track {border: none;}
}
// --------------------隐藏table gutter列和内容区右侧的空白 start
::v-deep .el-table th.gutter {display: none;width: 0
}
::v-deep .el-table colgroup col[namegutter] {display: none;width: 0;
}
// 这个样式不加的话内容哪里会缺一点估计是因为滚动条哪里缺的没有补上
::v-deep .el-table__body {width: 100% !important;
}
// --------------------隐藏table gutter列和内容区右侧的空白 end下面记录代码亲测有效。
div classleftTopEcharts1div classalarm-tableel-table :datathis.left1List1 stylewidth: 100%; height200 reftablemouseenter.nativeautoScroll(true)mouseleave.nativeautoScrollel-table-column proptypeName label告警类型 width270 /el-table-column propalmEntCount label告警数 //el-table/div/divimport { tableAutoScroll } from /utils/autoScroll
mounted() {setTimeout(() {// 想要滚动就必须设置表格高度这里设置的高度是100%即跟父元素等高this.tableHeight 100%this.infinitScroll()}, 500)
}methods: {/** 表格自动滚动 */infinitScroll() {// 拿到表格挂载后的真实DOMconst table this.$refs.table;tableAutoScroll(table)},
}autoScroll.js 工具类
/** 表格自动滚动 */
export const tableAutoScroll (table) {// 拿到表格中承载数据的div元素const divData table.bodyWrapper;divData.onmouseover function () {clearInterval(t);}; //鼠标移入停止滚动divData.onmouseout function () {start();}; //鼠标移出继续滚动// 拿到元素后对元素进行定时增加距离顶部距离实现滚动效果(此配置为每100毫秒移动1像素)let t;start();function start() {// 数据少于表格高度停止滚动if (divData.clientHeight divData.scrollHeight) {return;}t setInterval(() {// 元素自增距离顶部1像素divData.scrollTop 1;// 判断元素是否滚动到底部(可视高度距离顶部整个高度)if ( divData.clientHeight divData.scrollTop divData.scrollHeight ) {// 重置table距离顶部距离divData.scrollTop 0;}}, 100);}
}
.leftTopEcharts1 {height: 100%;width: 100%;background-image: url(~/assets/meilinScreen/qyscaqydjc/biankuang.png);background-size: cover;background-size: 100% 100%;box-sizing: border-box;overflow: hidden;
}
.alarm-table {padding-left: 5%;padding-top: 3%;padding-right: 3%;
}
/*去除滚动的滚动条*/
::v-deep .el-table th.gutter{display: none;width:0
}
::v-deep.el-table colgroup col[namegutter]{display: none;width: 0;
}
::v-deep .el-table__body{width: 100% !important;
}
::v-deep .el-table--scrollable-y .el-table__body-wrapper {overflow-y: hidden;
}
/*去除滚动的滚动条*/
