关于 element-plus el-table 表格列表滚动条无法正常触发问题解决

定制 el-table 内部样式

css样式是使用scss 及tailwindcss编写的
可选样式 列表高度撑开表格

// 表格列表高度完成撑开
.table_height_full {
  & ::v-deep .el-table__inner-wrapper {
    .el-table__body-wrapper {
      height: auto !important;
      .el-scrollbar__wrap {
        height: auto !important;
      }
    }
  }
}

表格高度根据父元素高度自适应

.el-table {
  width: 100%;
  height: 100% !important;
  font-size: 1rem;
  @apply flex flex-col;
  /* 根据父元素 使用 flex 使表格高度自适应 */
  & ::v-deep .el-table__inner-wrapper {
    @apply flex-grow;
    height: 100%;
    .el-scrollbar {
      @apply box-border;
    }
    .el-table__body-wrapper {
      .el-scrollbar__bar {
      }
      @apply w-full;
    }
  }
 }

修改完样式就可以选择撑开表格或者动态根据父元素设置表格高度使表格多余区域滚动

问题

当显示区域小于表格列表x方向显示内容时 列表完全撑开表格 无法触发el-table组件的滚动事件

解决

只需要在el-table组件外套一层 element-plus 的隐藏组件 el-scrollbar

//不固定表头
 <el-scrollbar>
	<el-table></el-table>
</el-scrollbar>

//如果是固定表头
  <el-scrollbar style="display: none"> </el-scrollbar>
  <el-table></el-table>

最后

以上就是呆萌鲜花为你收集整理的关于 element-plus el-table 表格列表滚动条无法正常触发问题解决的全部内容，希望文章能够帮你解决关于 element-plus el-table 表格列表滚动条无法正常触发问题解决所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。