去掉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>
相关推荐
孟陬17 分钟前
Foobar 技术周刊#160:大模型让大规模形式化软件验证成为现实丨AI写C++代码之后会发生什么?丨我们真的需要alpha() 函数吗丨重试,有时会让故障更
前端·后端·typescript
flash俊杰1 小时前
屏幕感知双通道:截图之外,为什么还要一份 UIA 控件清单
前端
熟的生菜1 小时前
从零造一个腱绳驱动灵巧手——仿真器篇3:VTK 渲染与 3D 交互——看得见、点得着、转得动
前端
Henry-SAP2 小时前
SAP PP中的核心业务流程——离散制造、重复制造、流程制造三大模式解析
前端·数据库·人工智能·制造
徐小夕2 小时前
下载量超 30 万的开源智能体 Prime Agent:它把自己从 TypeScript 重写成了 Rust
前端·vue.js·github
Zhao-Jichao2 小时前
AI Prompting for Everyone 课程笔记 - P20 实验与期末项目 Lab and Final Project
前端·人工智能·笔记
Moment3 小时前
为什么这么多 Agent Harness 都选择 TypeScript
前端·后端·面试
toooooop83 小时前
CRMEB 故障排查笔记:安全网关只放行 GET/POST 怎么办
前端·javascript·vue.js·thinkphp6·crmeb
软件技术NINI3 小时前
基于SpringBoot和Vue的项目评审系统
javascript·vue.js·spring boot·后端·spring·毕业设计·毕设
涛涛ing3 小时前
我现在最怕的不是 AI 写不出代码,是它写得太快,快到我不好意思说“等一下”
前端