修改el-table滚动条样式

最新推荐文章于 2025-05-12 18:14:58 发布

前端小云儿

最新推荐文章于 2025-05-12 18:14:58 发布

阅读量850

点赞数

CC 4.0 BY-SA版权

分类专栏：前端静态页面以及逻辑文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/jieweiwujie/article/details/134455986

前端静态页面以及逻辑专栏收录该内容

150 篇文章 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

本文介绍如何在Vue项目中，针对el-table组件的滚动条进行样式定制，通过CSS选择器深入理解如何修改JavaScript和ECMAScript环境下元素的样式，提升表格的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <h3>修改el-table滚动条样式</h3>
    <h3>看下面css部分</h3>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
// start
.el-table {
  // 滚动条的宽度
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 4px; // 横向滚动条
    height: 4px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: rgb(204, 208, 208); //颜色
    border-radius: 2px; //圆角
  }
}
// end
</style>

<style>
/* <!-- 去除le-table表格的hover效果
css代码： 如果不生效，就单独的放在一个style标签内，但是单独放会影响全局 --> */
/* 首先去除默认的hover效果 */

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(0, 0, 0, 0) !important;
}
</style>