利用el-table去做一个滚动的表格

需求是一个表格但是样式和element差异比较大。所以记录一下穿头的样式类名。

代码如下：

<template>
  <div class="contanier">
    <el-table
      :data="tableData"
      height="380"
      style="width: 100%"
      :border="false"
    >
      <el-table-column prop="date" label="小组名称" width="160">
      </el-table-column>
      <el-table-column prop="name" label="任务数量" width="160">
      </el-table-column>
      <el-table-column prop="address" label="执行率"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  created() {},
  data() {
    return {
      //表格数据
      tableData: [
        {
          date: "小组名称",
          name: "12",
          address: "100%",
        },
        {
          date: "小组名称",
          name: "12",
          address: "100%",
        },
        {
          date: "小组名称",
          name: "12",
          address: "100%",
        },
        {
          date: "小组名称",
          name: "12",
          address: "100%",
        },
        {
          date: "小组名称",
          name: "12",
          address: "100%",
        },
        {
          date: "小组名称",
          name: "12",
          address: "100%",
        },
        {
          date: "小组名称",
          name: "12",
          address: "100%",
        },
        {
          date: "小组名称",
          name: "12",
          address: "100%",
        },
        {
          date: "小组名称",
          name: "12",
          address: "100%",
        },
      ],
    };
  },
  methods: {},
  computed: {},
  watch: {},
  filters: {},
  components: {},
};
</script>

<style scoped lang="scss">
.contanier {
  padding: 0 5%;
// 调整单元格中的字号颜色
  ::v-deep .el-table td.el-table__cell div {
    font-size: 12px;
    //font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
  //调整表头的样式
  ::v-deep .el-table th.el-table__cell > .cell {
    font-size: 16px;
    color: #ffffff;
    font-weight: 600;
    font-family: YouSheBiaoTiHei;
  }
  //去掉表头的下边框
  ::v-deep .el-table th.el-table__cell {
    border: unset;
    background: rgba(10, 26, 36, 0.5) !important;
  }
  //鼠标经过是的样式
  ::v-deep .el-table__body tr:hover > td {
    background-color: transparent !important;
  }
  //去掉每行的下边框
  ::v-deep .el-table td.el-table__cell {
    border: unset;
  }
  //去掉表的下边框
  ::v-deep .el-table::before {
    height: 0 !important;
  }
  //去掉整个表的背景
  ::v-deep .el-table {
    background-color: transparent !important;
  }
//偶数显示的样式
  ::v-deep .el-table tr:nth-child(odd) {
    background: linear-gradient(
      90deg,
      rgba(142, 218, 249, 0) 0%,
      rgba(142, 218, 249, 0.3) 51%,
      rgba(142, 218, 249, 0) 100%
    ) !important;
  }
  //奇数显示的样式
  ::v-deep .el-table tr:nth-child(even) {
    background: linear-gradient(
      90deg,
      rgba(142, 218, 249, 0) 0%,
      rgba(20, 31, 41, 0.3) 51%,
      rgba(142, 218, 249, 0) 100%
    ) !important;
  }
  //取消滚动条
  ::v-deep .el-table__body-wrapper {
    &::-webkit-scrollbar {
      // 整个滚动条
      width: 0; // 纵向滚动条的宽度
      background: #022278;
      border: none;
    }
    &::-webkit-scrollbar-track {
      // 滚动条轨道
      border: none;
    }
  }

  // --------------------隐藏table gutter列和内容区右侧的空白 start
  ::v-deep .el-table th.gutter {
    display: none;
    width: 0;
  }
  ::v-deep .el-table colgroup col[name="gutter"] {
    display: none;
    width: 0;
  }

  ::v-deep .el-table__body {
    width: 100% !important;
  }
}
</style>

凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数