去掉el-table表头右侧类名是gutter,width=17px的空白区域(包括表头样式及表格奇偶行样式和表格自动滚动)

代码如下:

复制代码
      <el-table
        :data="tableData"
        ref="scroll_Table"
        :header-cell-style="getRowClass"
        :cell-style="styleBack"
        height="350px"
        style="width: 100%"
        
      >
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column prop="type" label="能耗分项"> </el-table-column>
        <el-table-column prop="value" label="能耗变化值"> </el-table-column>
        <el-table-column prop="value" label="变化百分比"> </el-table-column>
      </el-table>


      tableData: [],
      scrolltimer: "", //自动滚动的定时任务


  mounted() {
    this.autoScroll();
  },
  beforeDestroy() {
    this.autoScroll(true);
  },
  methods: {
    // 表头样式
    getRowClass() {
      return "background:#00235d; color:#22a2c8;border:1px solid #00235d;text-align:center";
    },
    // 表格奇偶层样式
    styleBack({ rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "background:#3864b4; color:#22a2c8;border:1px solid #3864b4;text-align:center";
      } else {
        return "background:#011c51; color:#22a2c8;border:1px solid #011c51;text-align:center";
      }
    },
    autoScroll(stop) {
      const table = this.$refs.scroll_Table;
      const divData = table.$refs.bodyWrapper;
      if (stop) {
        window.clearInterval(this.scrolltimer);
      } else {
        this.scrolltimer = window.setInterval(() => {
          divData.scrollTop += 1;
          if (
            divData.clientHeight + divData.scrollTop ==
            divData.scrollHeight
          ) {
            divData.scrollTop = 0;
          }
        }, 150);
      }
    },
  },


<style>
.el-table{
    background: transparent;
    margin-top:10px;
  }
  .el-table::before {
    height:0;
  }
  /deep/.el-table__body-wrapper::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }
  /deep/.el-table__body{
    width:100% !important;
  }
  // 去掉el-table表头右侧空白区域
  /deep/.el-table th.gutter{
    display: none;
    width:0
  }
  /deep/.el-table colgroup col[name='gutter']{
    display: none;
    width:0
  }
</style>
相关推荐
island131413 分钟前
JAVA Web 期末速成
java·开发语言·前端
小峰编程1 小时前
Python函数——万字详解
linux·运维·服务器·开发语言·前端·网络·python
海盐泡泡龟1 小时前
Javascript本地存储的方式有哪些?区别及应用场景?(含Deep Seek讲解)
开发语言·javascript·ecmascript
11054654012 小时前
23、电网数据管理与智能分析 - 负载预测模拟 - /能源管理组件/grid-data-smart-analysis
前端·能源
开发者小天2 小时前
React中startTransition的使用
前端·react.js·c#
@PHARAOH3 小时前
WHAT - 缓存命中 Cache Hit 和缓存未命中 Cache Miss
前端·缓存
计算机学姐3 小时前
基于SpringBoot的小型民营加油站管理系统
java·vue.js·spring boot·后端·mysql·spring·tomcat
Elastic 中国社区官方博客3 小时前
JavaScript 中使用 Elasticsearch 的正确方式,第一部分
大数据·开发语言·javascript·数据库·elasticsearch·搜索引擎·全文检索
万物得其道者成4 小时前
从零开始创建一个 Next.js 项目并实现一个 TodoList 示例
开发语言·javascript·ecmascript
海天胜景4 小时前
无法加载文件 E:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js