el-table固定表头不滚动

el-table 是 Element UI 中的一个表格组件，如果你想在表格中实现固定表头并且当内容区域滚动时，表头保持不动，你可以这样做：

1. 首先，在 `<el-table>` 标签上添加 `fixed` 属性，并设置值为 `true` 来启用表头的固定功能。例如：

<el-table :data="tableData" fixed>
  <el-table-column type="index"></el-table-column> <!-- 索引列 -->
  ... <!-- 其他列 -->
</el-table>

2. 如果你想让某一列固定，可以针对该列单独指定 `fixed` 属性，如 `left` 或 `right`，并调整相应的宽度。

3. 对于需要滚动的部分，只需给包含表格的容器添加 `scroll` 属性，比如 `height` 和 `x-scrollbar` 或 `y-scrollbar`，以便用户可以垂直滚动查看数据。例如：

<div style="height: 400px; overflow-y: auto;">
  <el-table :data="tableData" fixed></el-table>
</div>

相关问题

el-drawer内部el-table固定表头

在Element UI库中的`<el-drawer>`组件通常用于创建侧边栏抽屉，而`<el-table>`用于展示数据列表，其中包括固定的表头功能。如果你想在`el-drawer`中使用一个固定的表头，可以按照以下步骤操作：

1. 创建`el-drawer`元素并设置其可见性、宽度等属性：

<el-drawer
  title="标题"
  width="30%"
  :visible.sync="drawerVisible"
>
  <div style="overflow-y: auto;">
    <!-- 下面是包含el-table的区域 -->
  </div>
</el-drawer>

2. 在`el-drawer`内部，嵌套一个`el-table`组件，并设置`ref`以便后续引用，同时开启`fixed`属性使其头部固定：

<template>
  <el-table
    ref="table"
    :data="tableData"
    fixed-header
  >
    <!-- 表头部分 -->
    <el-table-column type="index" label="#" />
    <el-table-column prop="name" label="姓名" />
    <!-- 其他列... -->
  </el-table>
</template>

3. 管理`el-table`的状态，比如表格数据`tableData`和抽屉的显示状态`drawerVisible`。当`drawerVisible`改变时，可以调整`table`的滚动高度以便内容适应固定表头：

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      tableData: ... // 表格数据
    };
  },
  methods: {
    toggleDrawer() {
      this.drawerVisible = !this.drawerVisible;
      if (this.drawerVisible) {
        this.$refs.table沁ScrollHeight(); // 调整滚动高度
      }
    }
  },
  mounted() {
    // 初始化滚动高度调整
    if (this.drawerVisible) {
      this.$refs.table沁ScrollHeight();
    }
  }
};
</script>

4. 注意，`$refs`是一个JavaScript特性，它允许你在运行时访问到DOM元素，所以你需要确保`el-table`已经渲染完成才能引用。

el-table固定表头和首行

要在 Element UI 的 el-table 组件中同时固定表头和首行，请使用以下代码：

<el-table :data="tableData" style="width: 100%" border>
  <el-table-column prop="name" label="姓名" fixed="left" width="100"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
  <!-- ...其他列 -->
</el-table>

在上述代码中：

1. 通过设置 el-table-column 组件的 fixed 属性为 "left"，可以将该列固定到左侧。
2. 通过设置 el-table 的 border 属性为 true，可以显示表格的边框，使得表头和首行固定时更加美观。
3. 通过设置 el-table 的 style 属性，可以设置表格的宽度。

通过上述设置，可以同时固定表头和首行。注意，如果表格的数据过多，可能会导致表格出现滚动条，此时固定行和列的效果可能会有所减弱。