vue-pure-admin 使用pure-table 怎么固定表头

Vue-Pure-Admin是一个基于Vue.js的轻量级后台管理系统框架，它整合了Pure Table这个用于构建表格的组件。要在Vue-Pure-Admin中使用Pure Table并实现固定表头，你可以按照以下步骤操作：

1. 首先，在项目中安装所需的依赖：

   npm install @vue-pure-admin/components pure-table

2. 在你的组件文件中，引入Pure Table和需要固定的TableHeader组件：

   <template>
     <div>
       <PureTable :data="tableData" :columns="columns">
         <!-- ... -->
         <PureTableHeader ref="headerRef" />
         <!-- ... -->
       </PureTable>
     </div>
   </template>

   <script>
   import { PureTable, PureTableHeader } from '@vue-pure-admin/components';
   // ...
   export default {
     components: {
       PureTable,
       PureTableHeader
     },
     data() {
       return {
         tableData: ..., // 表格数据
         columns: ..., // 列配置
       };
     },
     mounted() {
       this.$refs.headerRef.addEventListener('scroll', this.handleScroll);
     },
     beforeDestroy() {
       this.$refs.headerRef.removeEventListener('scroll', this.handleScroll);
     },
     methods: {
       handleScroll() {
         // 在这里计算滚动位置并调整表头位置
         const header = this.$refs.headerRef;
         if (header) {
           // 根据滚动高度更新表头的位置
           header.style.transform = `translateY(-${header.scrollTop}px)`;
         }
       }
     }
   };
   </script>

3. 当页面滚动时，监听`PureTableHeader`的`scroll`事件，根据滚动位置动态调整表头的transform属性，使其始终保持在可视区域内。

注意，这只是一个基础示例，实际应用可能需要根据需求调整处理滚动的逻辑，比如计算偏移量、动画效果等。同时，确保你在CSS中设置了合适的样式以便于固定表头。