el-table固定表头及内容自动滚动，取消el-table的滚动条（兼容谷歌，火狐），顺便带有时间的显示

已于 2022-05-31 17:33:28 修改
阅读量3.7k 收藏 3
点赞数 1
文章标签： vue.js 前端 elementui
于 2022-05-31 17:28:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41973526/article/details/125069747
版权

在这里插入图片描述

<template>
<!-- 公航旅电子交易中心-近日标讯 -->
 <div class="tradeCenter_recentNews">
   <div class="tradeCenterHeader">
     <div class="leftLogo">
       <img src="@/onebigdata/img/gonLogo.png" alt="">
       <div class="title">公航旅电子交易中心-近日标讯</div>
     </div>
     <div class="rightTime">
       <img src="@/onebigdata/img/timeIcon.png" alt="">
       <p class="house"><span>{{hour}}</span>:<span>{{minute}}</span>:<span>{{second}}</span></p>
       <div class="day">
         <p class="week">{{week}}</p>
         <p class="rightDay"><span>{{year}}</span>年<span>{{month}}</span>月<span>{{day}}</span>日</p>
       </div>
     </div>
   </div>
   <div class="tradeCenterContant">
       <el-table
        :data="tableData"
        height="100%"
        :header-cell-style="{'color':'#333333','font-weight':'400','font-size':'16px'}"
        style="width: 100%"
        ref="table"
        >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          >
        </el-table-column>
        <el-table-column
          prop="projectName"
          label="项目名称"
          width="800">
        </el-table-column>
        <el-table-column
          prop="transactionAmount"
          label="交易编码">
        </el-table-column>
        <el-table-column
          prop="bidOpeningSite"
          label="开标场地">
        </el-table-column>
        <el-table-column
          prop="bidOpeningTime"
          label="开标时间">
        </el-table-column>
        
      </el-table>
      <el-button class="export" type="default">导出</el-button>
   </div>
 </div>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      tableData: [{
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目甘肃卫生职业学院医学教育理实一体化教学系统建设项目甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
        },
        {
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
        },
        {
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
        },
        {
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
        },
        {
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
        },
        {
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
        },
        {
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
        },
        {
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
        },
        {
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
        },
        {
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
        },
        {
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
        },
        {
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
        },
        {
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
        },
        {
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
        },
        {
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
        },
        {
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
        },
        {
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
        },
        {
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
        },
        {
          projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
          transactionAmount: '20220420-037582-2',
          bidOpeningSite: '第一开标厅',
          bidOpeningTime: '2022-12-12 12:00:00',
      }],
      timer: null,
 
      year: '',
      month: '',
      day: '',
      hour: '',
      minute: '',
      second: '',
      week: ''
    }
  },
  computed: {
  },
  created(){
    this.timer = setInterval(() => {
      this.FormatTime()
    },1000)

  },
  mounted(){
    this.init()
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    init(){
      const table = this.$refs.table
      const divData = table.bodyWrapper
      setInterval(()=>{
        divData.scrollTop += 2
        if(divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          divData.scrollTop = 0
        }
      },100) 
    },
      selectValue(){
          this.selectBar = !this.selectBar 
      },
      FormatTime() {
        //设置返回显示的日期时间格式
        var date = new Date();
        var year = this.formatTime(date.getFullYear());
        var month = this.formatTime(date.getMonth() + 1);
        var day = this.formatTime(date.getDate());
        var hour = this.formatTime(date.getHours());
        var minute = this.formatTime(date.getMinutes());
        var second = this.formatTime(date.getSeconds());
        var weekday = date.getDay();
        var weeks = new Array(
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六"
        );
        var week = weeks[weekday];
        //这里设置你要显示的格式
        this.year = year;this.month = month;this.day = day;
        this.hour = hour;this.minute = minute;this.second = second
        this.week = week

    },
    formatTime(n) {
      //判断时间是否需要加0
      if (n < 10) {
        return "0" + n;
      } else {
        return n;
      }
    }
  },
  components:{
  }
      
  }

</script>
<style lang="less" scoped>
.export {
  position: absolute;
  top: 25px;
  right: 69px;
  z-index: 9;
  padding: 6px 15px;
  background-color: rgba(59,134,232,1);
  color: #fff;
  border: none;
  &:hover {
    opacity: .9;
  }
}
.tradeCenter_recentNews {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  .tradeCenterHeader {
    height: 120px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 46px;
    padding-right: 59px;
    .leftLogo {
      display: flex;
      display: -webkit-flex;
      align-items: center;
      img {
        width: 90px;
        height: 63px;
      }
      .title {
        font-size: 32px;
        font-weight: 600;
        color: #333333;
        padding-left: 14px;
        padding-top: 5px;
      }
    }
    .rightTime {
      display: flex;
      display: -webkit-flex;
      align-items: center;
      img {
        width: 56px;
        height: 56px;
      }
      .house {
        font-size: 34px;
        font-weight: bold;
        color: #333333;
        padding-left: 14px;
        padding-right: 22px;
      }
      .day {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        .week {
          // padding-bottom: 5px;
        }
      }
    }
  }
  .tradeCenterContant {
    height: calc(100% - 120px);
    background-color: #F6F6F6;
    padding:20px 59px;
    position: relative;
    .el-table{
      // position: relative;
      &::v-deep {
          .el-table__body-wrapper::-webkit-scrollbar {
            /*width: 0;宽度为0隐藏*/
            width: 0px;
          }
          

          .el-table__body-wrapper::-webkit-scrollbar-thumb {
            border-radius: 4px;
            height: 58px;
            // background: rgba(241, 240, 245, 0.2);//滚动条颜色
            background: rgb(168, 171, 172);//滚动条颜色
          }
          .el-table__body-wrapper::-webkit-scrollbar-track {
            box-shadow: inset 0 0 5px rgba(241, 240, 245, 0.2);
            border-radius: 3px;
            background: #F1F0F5;//滚动条背景色
          }
        }
        /deep/ .el-table__body-wrapper::-webkit-scrollbar {
            /*width: 0;宽度为0隐藏*/
            width: 0px;
          }
    }
    .el-table {
      font-size: 16px;
        font-weight: 400;
        color: #333333;
        padding-bottom: 5px;
      /deep/.el-table__row:nth-child(2n+1) {
        background-color: #F8F8F8 !important;
      }
      /deep/.cell {
        overflow: hidden;
        white-space: nowrap;
      }
        /deep/td:first-child {
          text-align: center !important;
        }
        /deep/th:first-child {
          text-align: center !important;
        }
    }
      /deep/ .el-table__body-wrapper::-webkit-scrollbar {
      /*width: 0;宽度为0隐藏*/
      width: 0px;
    }
    
    /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
      border-radius: 2px;
      height: 50px;
      background: #eee;
    }
    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 2px;
      background: rgba(0, 0, 0, 0.4);
    }
 
    /deep/ .el-table--scrollable-y .el-table__body-wrapper {
      overflow: hidden !important;
    }
 
    /deep/ .el-table--scrollable-x .el-table__body-wrapper {
      overflow: hidden !important;
  }
  }
}

</style>
快乐的二进制鸭
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用vue-seamless-scroll插件，实现el-table自动滚动功能
weixin_39963518的博客
08-21 1449
使用vue-seamless-scroll插件，实现el-table自动滚动功能
使用el-table实现自动滚动
最新发布
weixin_38912662的博客
07-24 701
在前端开发大屏的时候，我们会用到表格数据展示，有时候为了使用户体验更加好，会增加表格自动滚动。下边我将以示例代码，用element UI的el-table来讲一下。2 通过判断dom的scrollHeight和scrollTop的关系，来实现滚动。1 .增加dom监听，鼠标放上去的时候不滚动，鼠标离开的时候滚动。3.当不需要使用，或者表格需要重新渲染的时候，我们需要清掉定时器。
记录项目工作中的一些问题
Xiaoxin_Java的博客
08-03 2081
一.禁止 element table 表格拖动 只需要在 el-table-column 标签中添加:resizable="false"即可 <el-table-column v-if="false" <-- 隐藏当前列 --> prop="username" label="用户名" width="120" :resizable="false"> </el-table-column> 二.解决springboot项目 instal
vue elementui table去掉滚动条与实现表格自动滚动且无滚动条
Smile yourlife
07-25 6423
现在需求是右侧滚动条不好看，需要去除滚动条，并隐藏滚动条所占列的位置。让他可以滚动但是不出现滚动条,不然即时隐藏了滚动条也会有一个空白列影响占位的。当table内容列过多时，可通过height属性设置table高度以固定table高度、固定表头，使table内容可以滚动。如果样式不想影响全局，可以使用样式穿透。autoScroll.js 工具类。下面记录代码，亲测有效。
el-table表格自动滚动，鼠标移入暂停滚动，移出开始滚动
weixin_42271384的博客
12-15 854
【代码】el-table表格自动滚动，鼠标移入暂停滚动，移出开始滚动。
el-table去掉滚动条（兼容谷歌火狐）
weixin_43550562的博客
10-08 3071
// 隐藏滚动条 /deep/ .el-table__body-wrapper::-webkit-scrollbar { /*width: 0;宽度为0隐藏*/ width: 0px; } /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb { border-radius: 2px; height: 50px; background: #eee;...
el-table表格自动滚动
weixin_42878641的博客
06-13 865
表格自动滚动
[IE兼容] el-table组件固定列触发滑轮滚动时，移动速度缓慢 另类解决方法
weixin_45776447的博客
06-30 1348
[IE兼容] el-table组件固定列触发滑轮滚动时，移动速度缓慢及动画不流畅 之前通过css 禁用固定列的鼠标事件形成事件穿透解决 详见上篇文章: el-table组件固定列触发滑…. style{ pointer-events:none } 方法暴力，但对后续业务却造成影响，例如在固定列上增加点击事件时，虽然可以通过 pointer-events:auto 恢复，但滑动穿透效果失效 通过对固定列页面打断点定位mousewheel方法，发现element-ui及引用的normalize-wheel.
el-table表格做滚动条样式处理
qq_20954567的博客
05-28 3599
vue项目中引入Element-UI并对其el-table表格做滚动条样式处理 需求分析： 主要是对table表格中的body内容做滚动处理，表头样式不做变化。初调时X轴和Y轴都做了overflow：auto滚动设置。结果当X轴右滑动后会出现表头和表格内容对不齐的问题。经测试发现是Y轴滚动条宽度占用了表格内容的宽度。所以问题的核心还是如何使XY轴滚动且X轴显示滚动条，而Y轴隐藏滚动条。 调试过程方法测试 方案一：利用父级标签隐藏子级滚动条的思路：由于针对el-table标签中的body做处理，如果在再外
element table滚动条占宽度_element-ui使用perfect-scrollbar修改table等滚动条
weixin_39710003的博客
12-19 842
首先是perfect-scrollbar的安装。选择插件而不是直接改css的原因，是因为需要兼容火狐你懂的。npm install perfect-scrollbar --save-devpublic.css，scroll-item是自定义类，类似于指令效果，加上clssname就自动生成scrollbar。之所以不用指令，是因为无法修改element-ui组件，用classname方便一点。tr...
Bootstrap Table固定列及IE11兼容性问题解决
记录
08-15 4187
最近项目的前端用的是bootstrap，用Bootstrap Table做的表格显示。有一部分表格比较特殊，需要实现固定前面几列，后面的拖动。给的原型是用的superTable实现的，整合进项目用Bootstrap Table去实现，自然而然就有了这篇记录文章。 使用的是bootstrap-table-fixed-columns。示例demo百度网盘下载：点击打开链接。 按照d
vue 可编辑表格，实现 ElementUI 编辑 table，增删改查 Grid，vue编辑 table，elx-table、elx-editable...
chunhuangyin2649的博客
06-06 6884
最新版本见 vue-element-extends （可能这应该是目前最优的一种实现方式了吧） Vue + ElementUI 2.x 实现的可编辑表格组件，支持渲染任意组件、动态列，增删改查等操作； 保持 ElTable 一致的风格，弥补了 ElTable 可编辑表格功能的不足，兼容 ElT...
elementui el-table表格自动循环滚动
DarlingYL的博客
05-23 8400
普通的表格数据自动循环滚动，并且滚动到最后一条数据后，再回到第一条数据进行滚动
el-table表格实现自动滚动效果
小李在努力学习
07-18 2382
【代码】el-table表格实现自动滚动效果。
实现el-table表单自动滚动
weixin_57889610的博客
12-12 1976
然后设置计时器，并且设置鼠标移入移出事件 并且设置定时器进行数据滚动。首先 设置ref="tableRef" 获取当前的dom元素。效果是表格数据自动滚动，鼠标移入暂停滚动 移出滚动继续。
超级简单的数据自动滚动el-table表格
cainiaotaotao的博客
07-13 1520
库存预警滚动表格，表格中每行数据由编号、物料及物料名称、仓库及仓库名称、当前库存及库存数量、状态（包括正常（黑色）、不足（绿色）、溢出（红色））构成，表格数据会自动滚动。这样一个数据可视化的自动滚动表格就做好了，是不是很简单？
element-ui组件table去除下方滚动条，实现鼠标左右拖拽移动表格
懒人w的博客
05-28 1367
项目前端使用vue框架，页面使用element-ui进行页面快速搭建。默认的table组件当表格过长时，下方会出现横向的滚动条，便于用户对表格进行左右滑动。考虑到页面美观问题，滚动条设置的很窄，导致用户使用时不方便进行左右滑动。 现要求，去除表格下方滚动条，用户可直接拖拽表格实现左右滑动功能。
el-table 固定表头失败
10-07
el-table 固定表头失败是因为在使用setheaderColSpan()方法合并表头时受到fixed属性的影响。在这种情况下，合并的表头并不会生效。解决这个问题的方法是使用el-table的header-cell-style属性来实现表头的合并。通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值