我正在参加「掘金日新计划 · 4 月更文挑战」，本文讲解element ui table表格高度自适应屏幕大小变化，固定表头以及去除table表格滚动条

固定表头

要实现在窗口大小改变时自适应表格高度，并固定表头，你可以按照以下步骤进行操作：

在模板中使用ref属性给el-table组件命名，以便在JavaScript代码中引用它。例如：

<template>
  <div ref="tableHeight" class="table-container">
    <el-table
      ref="tableData"
      v-loading="listLoading"
      :data="dataFunction"
      element-loading-text="Loading"
      fit
      stripe
      border
      row-key="id"
      :height="tableHeight"
      highlight-current-row
      :header-cell-style="{'text-align':'center'}"
      >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-card ref="cardHeight">
      <el-pagination
        small
        layout="total, prev, pager, next, jumper"
        :page-size="pageSize"
        :current-page="currentPage"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

在mounted生命周期中获取表格元素的高度和窗口的高度，table表格距离顶部高度，以便在窗口大小或表格大小改变时重新计算表格高度。

data() {
        return {
            dialogInfo: { // 数据调整 新增/修改 内容
                tableDialogVisible: false, // dialog是否显示
                title: '新增数据'
            },
            currentPage: 1, // 当前页码
            total: 100, // 总条目数
            pageSize: 50, // 每页数据
            tableHeight: 0
        }
    },
    mounted() {
        this.$nextTick(() => {
            // 自适应表格高度
            this.tableHeight = window.innerHeight - 50 - this.$refs.tableData.$el.offsetTop - this.$refs.cardHeight.$el.offsetHeight;
            // 监听窗口大小变化
            const self = this;
            window.onresize = function() {
                self.tableHeight = window.innerHeight - self.$refs.tableData.$el.offsetTop - self.$refs.cardHeight.$el.offsetHeight
            }
        })
    },

注释：这里说明减去五十是navbar的高度

这将使表头在滚动时保持固定。

效果如下

去除滚动条

现在需求是右侧滚动条不好看，需要去除滚动条，并隐藏滚动条所占列的位置。让他可以滚动但是不出现滚动条,不然即时隐藏了滚动条也会有一个空白列影响占位的。

这个你会发现右侧会出现一个滚动条，我认为是很丑的，那么怎么去掉呢，很简单，几行css样式即可实现右侧滚动条去除，在网上找到一些方法如这样处理

// ----------修改elementui表格的默认样式-----------
.el-table__body-wrapper {
  &::-webkit-scrollbar { // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgba(213,215,220,0.3);
    border: none;
  }
  &::-webkit-scrollbar-track { // 滚动条轨道
    border: none;
  }
} 

.el-table th.gutter{
  display: none;
  width:0
}
.el-table colgroup col[name='gutter']{
  display: none;
  width: 0;
}
.el-table__body{
  width: 100% !important;
}

这样仅能实现把那个滚动条颜色去掉滚动条那个照样占位，并不能真的实现滚动条去除，而且还不美观。使用下列代码可以完美实现滚动条去除

代码如下：

// table 右侧滚动条去除
::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}
  /* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 0px;
}

实现效果：

滚动条没有了，右侧占位也没了，果然美观了很多

❤️ 谢谢支持

以上便是本次分享的全部内容，希望对你有所帮助^_^

如果你有任何想法和疑问，欢迎留言～一起探讨

点赞收藏不迷路

vue element ui table表格高度自适应屏幕大小变化，固定表头及去除table滚动条

固定表头

去除滚动条

❤️ 谢谢支持