vxe-table固定表头同时不显示滚动条，粘性定位sticky

想要表头固定同时表格还不能有滚动条，所以用vxe-table自带的固定表头无法实现，所以考虑使用css的粘性定位实现

思路就是给表头的th加粘性定位，同时要一个一个的排查它的父元素有没有overflow：hidden，要改成visible，但是研究了很久都不生效

所以改成了自己写一个表头，让它粘性定位，同时把vxe-table的表头设置为隐藏，代码如下：

<template>
  <div id="app" ref="scrollContainer">
    <a-button class="btn" @click="start">开始</a-button></a-button>

    <div>

    <div class="header">
      <div class="inline" style="width:4%">
        No
      </div>
      <div class="inline" style="width:46%">
        Name
      </div>
      <div class="inline" style="width:3%">
        Age
      </div>
      <div class="inline" style="width:27%">
        内容
      </div>

      <div class="inline" >
        操作
      </div>
    </div>

    <vxe-table
      :show-header="false"
      class="my-table"
      :data="tableData">
      <vxe-column type="seq" width="70"></vxe-column>
      <vxe-column title="Name" width="700">
          <template #default="{ row }">
            <span v-html="row.name"></span>
            <!-- <vxe-button >复制</vxe-button> -->
          </template>
      </vxe-column>
      
      <vxe-column field="age" title="Age" width="70"></vxe-column>

      <vxe-column  title="内容">
         <template #default="{ row }">
        <span v-html="row.address"></span>
        
      </template>
      </vxe-column>

      <vxe-table-column title="操作" width="250">
        <template #default="{ row }">
          <vxe-button >编辑</vxe-button>
          <vxe-button >删除</vxe-button>
        </template>
      </vxe-table-column>
    </vxe-table>

    <!-- <button @click="loadMoreTable" :disabled="isLoading || isAllLoaded">{{isAllLoaded ? '已经到底了' : '加载更多'}}</button> -->

     <div class="center">
        <a-button v-if="!loadingMore" @click="loadMoreTable">
          {{isAllLoaded ? '已经到底了' : '加载更多'}}
        </a-button>
        <a-spin v-else />
        
     </div>

  </div>


    <a-list
    class="demo-loadmore-list"
    :loading="loading"
    item-layout="horizontal"
    :data-source="data"
  >
    <div
      v-if="showLoadingMore"
      slot="loadMore"
      :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
    >
     
    </div>
    <a-list-item slot="renderItem" slot-scope="item, index">
        <a slot="actions">edit</a>
			      <a slot="actions">more</a>
			      <div>
					  <span v-html="item.name"></span>
					  <a-icon type="copy" />
				  </div>
			      <div>{{item.age}}</div>
				  <div v-html="item.address"></div>
    </a-list-item>
  </a-list>
   
  </div>
</template>

<script>
import reqwest from "reqwest";
import $ from "jquery";

const fakeDataUrl =
  "https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo";
const provinceData = ["杭州市", "温州市", "嘉兴市", "绍兴市", "宁波"];
export default {
  name: "App",
  data() {
    return {
      tableData1: [
        
        
      ],
      temp: [],
      isLoading: false, // 是否正在加载
      isAllLoaded: false, // 是否已经加载完全部
      page: 1, // 当前页数
      pageSize: 20, // 每页条目数
      tableData: [],
      loading: false,
      loadingMore: false,
      showLoadingMore: true,
      data: [],
      index: 1,
      enterprise: [],

      form: {},
    };
  },
  mounted() {

    for(let i =0; i < 21; i++) {
      this.tableData1.push(
        { name: 'Jane', age: 25 },
      )
    }
   

    for (let i = 0; i < 20; i++) {
      this.temp.push({
        id: 10001,
        name:
          i +
          'com.heima.jvm.ArthasDemocom.heima.jvm.ArthasDemocom.heima.jvm.<br><span style="font-weight: bold;">ArthasDemo.java</span>',
        role: "Develop",
        sex: "Man",
        age: 28,
        address:
          'ApplicationContext <span style="color: red;">context</span> = new<span style="color: red;">context</span> ClassPathXmlApplicationContext<span style="color: red;">context</span>("applicationContext.xml");MyBean myBean = context.getBean(MyBean.class);',
      });
    }
  },

  methods: {
    loadMoreTable() {
      if (this.isLoading || this.isAllLoaded) return;
      this.isLoading = true;
      
        const start = (this.page - 1) * this.pageSize;
        var end = start + this.pageSize;

        console.log("start end length", start, end,this.temp.length )

        if (end > this.temp.length) {
          end = this.temp.length;
        }

        var moreItems = [];
        for (let i = start; i < end; i++) {
          moreItems.push(this.temp[i]);
        }

         this.getData((res) => {
        //this.data = this.data.concat(res.results);
        console.log("data=", this.data);

         if (moreItems.length > 0) {
              this.tableData = [...this.tableData, ...moreItems];
              this.page++;
            } else {
              this.isAllLoaded = true;
            }

        this.loadingMore = false;
        this.$nextTick(() => {
          window.dispatchEvent(new Event("resize"));
        });
      });

       
      
      this.isLoading = false;

      
       this.loadingMore = true;
     

      
    },
    start() {
      this.loadingMore = !this.loadingMore;
    },
    onChange(value, dateString) {},
    onOk(value) {},
    onChange() {},
    getData(callback) {
      var pageSize = 10;
      var start = (this.index - 1) * pageSize;
      var end = start + pageSize;

      var results = [];
      for (let i = start; i < end; i++) {
        results.push({
          name:
            i +
            'com.heima.jvm.ArthasDemocom.heima.jvm.ArthasDemocom.heima.jvm.<br><span style="font-weight: bold;">ArthasDemo.java</span>',
          age: 32,
          address:
            'ApplicationContext <span style="color: red;">context</span> = new<span style="color: red;">context</span> ClassPathXmlApplicationContext<span style="color: red;">context</span>("applicationContext.xml");MyBean myBean = context.getBean(MyBean.class);',
        });
      }

      this.index++;

      var resul = {
        results: results,
      };

      var jsonData = {
        key1: "value1",
        key2: "value2",
      };

      $.ajax({
        url: fakeDataUrl,
        type: "get",
        contentType: "application/json",
        data: null,
        success: function (response) {
          // 处理响应
          console.log("结果：", response);
          callback(resul);
        },
        error: function (xhr, status, error) {
          // 处理错误
          console.error(error);
        },
      });

      // reqwest({
      //   url: fakeDataUrl,
      //   type: 'json',
      //   method: 'get',
      //   contentType: 'application/json',
      //   success: res => {
      //     callback(resul);
      //   },
      // });
    },
    onLoadMore() {
      this.loadingMore = true;
      this.getData((res) => {
        this.data = this.data.concat(res.results);
        console.log("data=", this.data);
        this.loadingMore = false;
        this.$nextTick(() => {
          window.dispatchEvent(new Event("resize"));
        });
      });
    },
    //开始测算（调取测算接口）
  },
};
</script>

<style >
    .inline{
      margin-left: 10px;
      display: inline-block;
    }

    .header{
      width: 100%;
      line-height: 47px;
      height: 47px;
      text-align: left;
      position: sticky!important;
      top: 0!important;
      z-index: 9999!important;
      background-color: skyblue!important;
    }

    #app{
      padding: 10px;
    }

    .vxe-table--header-wrapper{
      overflow-x: visible!important;
      overflow-y: visible!important;
    }

    /* .vxe-header--column {
      position: sticky!important;
      top: 0!important;
      z-index: 9999!important;
      background-color: skyblue!important;
    } */

    .btn{
      margin-bottom: 20px;
    }

  /* .vxe-header--column{
    position: sticky;
    top: 0;
    z-index: 1;
    
  } */

  .center{
    text-align: center;
    margin-top: 12px;
    height: 32px;
    line-height: 32px;
    
  }
.demo-loadmore-list {
  min-height: 350px;
}
.fileb {
  margin-right: 200px;
}
/* .ant-form-item {
  display: flex !important;
}
.ant-form-item-control-wrapper {
  flex: 1 !important;
  width: 100% !important;
} */
</style>