vue 原生table表格 实现无限滚动效果（vueSeamlessScroll使用）

<template>
  <div class="productionCatalogueTable">
    <div class="missMaterialsTable" v-if="tableData && tableData.length > 0">
      <div class="table">
        <div class="line_th">
          <span class="th_name" style="width: 20%">册序号</span>
          <span class="th_name" style="width: 20%">航材名称</span>
          <span class="th_name" style="width: 20%">型号</span>
          <span class="th_name" style="width: 20%">装备机型</span>
          <span class="th_name" style="width: 20%">修理能力</span>
        </div>
        <div
          :style="{height: height ? height.split('rem')[0] - 3 + 'rem' : '100%'}"
          class="newStyle"
        >
          <vue-seamless-scroll
            ref="scroll"
            :data="tableData"
            :class-option="defaultOption"
            class="warp"
            :style="{
              height: height ? height.split('rem')[0] - 3 + 'rem' : '100%',
            }"
          >
            <div
              class="line_tr"
              v-for="(item, index) in tableData"
              :key="index"
            >
              <span class="th_name" style="width: 20%">
                <el-tooltip effect="dark" placement="top">
                  <div slot="content">
                    {{ item.ceSeq ? item.ceSeq : "暂无" }}
                  </div>
                  <span>{{ item.ceSeq ? item.ceSeq : "暂无" }}</span>
                </el-tooltip>
              </span>
              <span class="th_name" style="width: 20%">
                <el-tooltip effect="dark" placement="top">
                  <div slot="content">
                    {{ item.aeromatName ? item.aeromatName : "暂无" }}
                  </div>
                  <span>{{
                    item.aeromatName ? item.aeromatName : "暂无"
                  }}</span>
                </el-tooltip>
              </span>
              <span class="th_name" style="width: 20%">
                <el-tooltip effect="dark" placement="top">
                  <div slot="content">
                    {{ item.model ? item.model : "暂无" }}
                  </div>
                  <span>{{ item.model ? item.model : "暂无" }}</span>
                </el-tooltip>
              </span>
              <span class="th_name" style="width: 20%">
                <el-tooltip effect="dark" placement="top">
                  <div slot="content">
                    {{ item.aeroType ? item.aeroType : "暂无" }}
                  </div>
                  <span>{{ item.aeroType ? item.aeroType : "暂无" }}</span>
                </el-tooltip>
              </span>
              <span class="th_name" style="width: 20%">
                <el-tooltip effect="dark" placement="top">
                  <div slot="content">
                    {{ item.factoryAbility ? item.factoryAbility : "暂无" }}
                  </div>
                  <span>{{ item.factoryAbility ? item.factoryAbility : "暂无" }}</span>
                </el-tooltip>
              </span>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
       
    </div>
    <div class="noData" v-else>
      <div class="no-data-img">
        <img src="../../../../assets/images/planeNoData.png" alt="" />
      </div>
    </div>
     
  </div>
</template>

<script>
import { getSupplyCatalogueList } from "@/api/screen/workhousePage.js";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "productionCatalogueTable",
  props: ["height", "width"],
  inject: ["prePageInfo"],
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      tableData: []
    };
  },
  // 监听属性 类似于data概念
  computed: {
    defaultOption() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 16, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        warehouseName: null
      };
    },
  },
  mounted() {
    if (this.prePageInfo.queryInfo && this.prePageInfo.queryInfo.name) {
      this.warehouseName = this.prePageInfo.queryInfo.name;
    }
    this.catalogueList();
  },
  methods: {
    catalogueList() {
      getSupplyCatalogueList({
        factoryName: this.warehouseName,
      }).then(res => {
        if(res.code == 200) {
          this.tableData = res.rows;
        } else {
          this.$modal.msgError(res.msg);
        }
      }).catch(err => {
        console.log(err);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("../../css/noData.scss");
.productionCatalogueTable {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;
  .missMaterialsTable{
    height: 100%;
    width: 100%;
  }
  .table {
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 1.4rem;
    .line_th {
      height: 4rem;
      display: flex;
      align-items: center;
      color: #ffffffcc;
      font-weight: 500;
      background: url("../../../../assets/images/newScreen/[email protected]")
        no-repeat center center;
      background-size: 100% 100%;
      .th_name1 {
        font-size: 1.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .line_tr {
      height: 3rem;
      display: flex;
      line-height: 3rem;
      color: #ffffffcc;
      border-top: 0.1rem dotted #506b81;
      background: url("../../../../assets/images/newScreen/[email protected]")
        no-repeat center center;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .warp {
      overflow: hidden;
    }
    .th_tr {
      display: inline-block;
      text-align: center;
      font-size: 1.2rem;
    }
    .th_name {
      display: inline-block;
      text-align: center;
      font-size: 1.2rem;
      padding-left: 2%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>