去掉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>
相关推荐
程序员爱钓鱼24 分钟前
Go错误处理全解析:errors包实战与最佳实践
前端·后端·go
清汤饺子9 小时前
OpenClaw 本地部署教程 - 从 0 到 1 跑通你的第一只龙虾
前端·javascript·vibecoding
颜酱9 小时前
图的数据结构:从「多叉树」到存储与遍历
javascript·后端·算法
爱吃的小肥羊11 小时前
比 Claude Code 便宜一半!Codex 国内部署使用教程,三种方法任选一!
前端
IT_陈寒12 小时前
SpringBoot项目启动慢?5个技巧让你的应用秒级响应!
前端·人工智能·后端
树上有只程序猿13 小时前
2026低代码选型指南,主流低代码开发平台排名出炉
前端·后端
橙某人13 小时前
LogicFlow 小地图性能优化:从「实时克隆」到「占位缩略块」!🚀
前端·javascript·vue.js
高端章鱼哥13 小时前
为什么说用OpenClaw对打工人来说“不划算”
前端·后端
大脸怪13 小时前
告别 F12!前端开发者必备:一键管理 localStorage / Cookie / SessionStorage 神器
前端·后端·浏览器
Mr_Mao13 小时前
我受够了混乱的 API 代码,所以我写了个框架
前端·api