【无标题】el-table隐藏横纵滚动条并滚动

最新推荐文章于 2024-05-20 17:02:17 发布

苹果函数

最新推荐文章于 2024-05-20 17:02:17 发布

阅读量916

点赞数 1

分类专栏： Vue原理与实战文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_50077864/article/details/128042933

版权

Vue原理与实战专栏收录该内容

9 篇文章 0 订阅

订阅专栏

el-table隐藏横纵滚动条并滚动，代码如下：

<div class="table-box">
        <el-table :data="tableData" height="80%" v-loadmore="loadMore" v-loading="loadingTable"
          element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(10,88,128,0.2)" class="table">
          <el-table-column label="排名" type="index" width="80px"> </el-table-column>
          <el-table-column label="企业名称" prop="enterpriseName" width="160px"> </el-table-column>
          <el-table-column label="企业地址" prop="address" width="400px"> </el-table-column>
          <el-table-column label="入驻时间" prop="time" show-overflow-tooltip> </el-table-column>
        </el-table>
</div>
<style>
.table-box {
  padding: 30px 18px;
  .table {
    //隐藏表格滚动条start
    .is-scrolling-none {
      overflow: hidden;
      overflow-y: auto;
      overflow-x: scroll;
    }

    .is-scrolling-none::-webkit-scrollbar {
      display: none;
    }

    .el-table--scrollable-y ::-webkit-scrollbar {
      display: none;
    }

    .el-table--scrollable-x ::-webkit-scrollbar {
      display: none;
    }
    //隐藏表格滚动条end

  }
}
</style>