vue3-seamless-scroll 使用a-table固定表头

根据提供的引用内容，我们可以使用vue3-seamless-scroll和a-table来实现固定表头的效果。具体步骤如下：

1.安装vue3-seamless-scroll插件

npm install vue-seamless-scroll --save

2.在main.js文件中引入vue3-seamless-scroll插件

import Vue from 'vue'
import VueSeamlessScroll from 'vue-seamless-scroll'
Vue.use(VueSeamlessScroll)

3.在template中使用vue3-seamless-scroll组件，并将a-table作为子组件嵌套在其中。需要注意的是，需要将a-table的高度设置为固定值，并将其放在一个div中，以便于在滚动时固定表头。

<template>
  <vue-seamless-scroll :speed="100" :pause-on-hover="true">
    <div class="scroll-table" ref="scrollTable">
      <a-table :columns="columns" :data-source="data" :scroll="{ y: 300 }">
        <template #scroll-body="{ scrollBodyRef }">
          <div class="table-body" ref="tableBody">
            <a-table :columns="columns" :data-source="data" :scroll="{ y: 0 }"></a-table>
          </div>
        </template>
      </a-table>
    </div>
  </vue-seamless-scroll>
</template>

4.在script中定义columns和data，用于渲染a-table。

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          fixed: 'left',
          width: 100
        },
        {
          title: 'Age',
          dataIndex: 'age',
          width: 100
        },
        {
          title: 'Address',
          dataIndex: 'address',
          width: 200
        },
        {
          title: 'Action',
          key: 'action',
          fixed: 'right',
          width: 100,
          slots: { customRender: 'action' }
        }
      ],
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park'
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park'
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park'
        },
        {
          key: '4',
          name: 'Disabled User',
          age: 99,
          address: 'Sidney No. 1 Lake Park'
        }
      ]
    }
  },
  mounted() {
    this.$refs.scrollTable.addEventListener('scroll', (event) => {
      this.adjustTable(event)
    })
  },
  methods: {
    adjustTable(event) {
      const tableHeader = this.$refs.tableBody.querySelector('.ant-table-header')
      tableHeader.style.transform = `translateX(-${event.target.scrollLeft}px)`
    }
  }
}
</script>

5.在style中定义样式，使得表头固定在顶部。

<style>
.scroll-table {
  height: 300px;
  overflow: auto;
  position: relative;
}

.table-body {
  height: 0;
  overflow: hidden;
}

.ant-table-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #fff;
}
</style>