定制 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>