vue element表格表头固定 内容上下滚动

要在Vue Element表格中实现固定表头和内容上下滚动，可以利用Element UI提供的表格组件的特性和样式进行操作。

首先，需要在表格组件外部包裹一个具有固定高度的容器，并设置其样式为`overflow: auto;`，这样就可以实现内容的上下滚动。

然后，在表格组件中，设置`height`属性为需要固定的高度，并将`max-height`属性设为`none`，这样表格内容就可以根据容器的高度自动调整，并实现垂直滚动。

接下来，为表格头部的`el-table-column`组件设置`fixed`属性为`true`，这样表头就会固定在容器的顶部。

此外，可以对滚动容器的样式进行个性化设置，例如添加边框、背景颜色等，以满足具体项目的需求。

最后，在使用Element UI的表格组件时，还需要根据实际数据的情况进行横向或纵向的滚动设置，以确保表格可以正常显示和滚动。

总结来说，实现Vue Element表格表头固定和内容上下滚动的方法是，在表格组件外部包裹一个固定高度的容器，并设置容器的样式为`overflow: auto;`，在表格组件中设置固定高度和表头`fixed`属性，最后根据需要对滚动容器的样式进行个性化设置。

相关问题

vue-element-admin里el-table表格如何设置头尾固定中间滑动的效果

在 Vue-Element-Admin 中，`ElTable` 是 Element UI 提供的一个强大的表格组件，如果想要实现表头固定、内容区域滚动以及底部固定的分页效果，你可以按照以下步骤操作：

1. 首先，安装 `element-ui` 和 `vue-fixed-columns` 插件，这是第三方库用于实现固定列的功能：

   npm install element-ui vue-fixed-columns

2. 引入所需的样式和组件：

   import { ElTable, ElTableColumn } from 'element-ui';
   import FixedColumns from 'vue-fixed-columns';

3. 使用 `FixedColumns` 组件包裹你的 `ElTable`：

   <template>
     <div>
       <FixedColumns :columns="tableColumns" :height="height">
         <el-table :data="tableData" style="width: 100%">
           <!-- ... 表格数据和列配置 ... -->
         </el-table>
       </FixedColumns>
     </div>
   </template>

4. 定义 `tableColumns` 变量，包含表头和动态生成的列，以及固定列和滚动区域的配置：

   export default {
     data() {
       return {
         tableColumns: [
           // 固定列
           { type: 'index', width: 50 },
           { prop: 'header1', label: '标题一', fixed: 'left', width: 200 },
           // 动态生成的列
           ...
         ],
         tableData: [],  // 数据源
         height: window.innerHeight, // 滚动区域高度，可以根据需求调整
         // ... 其他变量
       };
     }
   }

5. 确保你的表格数据已经填充，并处理滚动事件和其他交互，比如分页。

用element ui 里面的表格组件写一个列表可以循环滚动的组件，并且表头固定

可以尝试使用vue-virtual-scroll-list和element-ui的el-table组件配合使用实现循环滚动列表。在el-table上使用sticky属性可以实现固定表头，具体实现可以参考以下代码：

<template>
  <div class="scroll-list">
    <el-table :data="items" style="width: 100%" :height="tableHeight" :sticky-header="true">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list';
export default {
  name: "ScrollList",
  components: {
    VirtualList,
  },
  props: ['items', 'itemHeight'],
  computed: {
    // 根据数据长度和每个元素的高度计算列表高度
    tableHeight() {
      return this.items.length * this.itemHeight;
    }
  },
  methods: {
    // 渲染虚拟列表元素
    itemRenderer(item, index) {
      return (
        <div class="virtual-item">
          <span>{item.name}</span>
          <span>{item.age}</span>
          <span>{item.address}</span>
        </div>
      )
    },
    // 获取虚拟列表元素高度
    itemSize() {
      return this.itemHeight;
    },
  },
}
</script>

<style scoped>
.scroll-list {
  height: 400px; // 列表高度
  overflow-y: scroll;
}
.virtual-item {
  height: 40px; // 每个元素的高度
  line-height: 40px;
}
</style>

其中，VirtualList组件用于渲染虚拟列表元素，计算显示区域内需要显示的元素，可以有效提升大数据量列表的性能。el-table的sticky属性用于实现表头固定，设置为true即可。在组件中计算列表高度和元素高度，将其传递给VirtualList组件即可实现循环滚动列表。