vue elementui table去掉滚动条与实现表格自动滚动且无滚动条

当table内容列过多时,可通过height属性设置table高度以固定table高度、固定表头,使table内容可以滚动。

现在需求是右侧滚动条不好看,需要去除滚动条,并隐藏滚动条所占列的位置。让他可以滚动但是不出现滚动条,不然即时隐藏了滚动条也会有一个空白列影响占位的。

css 复制代码
// ----------修改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[name='gutter']{
  display: none;
  width: 0;
}
.el-table__body{
  width: 100% !important;
}
// --------------------隐藏table gutter列和内容区右侧的空白 end

如果样式不想影响全局,可以使用样式穿透

css 复制代码
::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[name='gutter'] {
    display: none;
    width: 0;
}
// 这个样式不加的话内容哪里会缺一点,估计是因为滚动条哪里缺的没有补上
::v-deep .el-table__body {
    width: 100% !important;
}
// --------------------隐藏table gutter列和内容区右侧的空白 end

下面记录代码,亲测有效。

css 复制代码
<div class="leftTopEcharts1">
    <div class="alarm-table">
      <el-table :data="this.left1List1" style="width: 100%;" height="200" ref="table"
                @mouseenter.native="autoScroll(true)"
                @mouseleave.native="autoScroll">
        <el-table-column prop="typeName" label="告警类型" width="270" />
        <el-table-column prop="almEntCount" label="告警数" />
      </el-table>
    </div>
  </div>
css 复制代码
import { tableAutoScroll } from '@/utils/autoScroll'
mounted() {
    setTimeout(() => {
      // 想要滚动就必须设置表格高度,这里设置的高度是100%,即跟父元素等高
      this.tableHeight = "100%"
      this.infinitScroll()
    }, 500)
}

methods: {
 /** 表格自动滚动 */
    infinitScroll() {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table;
      tableAutoScroll(table)
    },
}

autoScroll.js 工具类

css 复制代码
/** 表格自动滚动 */
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);
  }
}
css 复制代码
.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[name='gutter']{
  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;
}
/*去除滚动的滚动条*/
相关推荐
码蜂窝编程官方12 分钟前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游
gqkmiss12 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃18 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰22 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye29 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm31 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js