去掉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>
相关推荐
人工智能训练师4 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny075 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy6 小时前
css的基本知识
前端·css
昔人'6 小时前
css `lh`单位
前端·css
前端君6 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6147 小时前
Web前端面试题(2)
前端
知识分享小能手7 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队8 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光9 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军9 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite