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

超级无敌小小小白

于 2024-03-12 13:55:43 发布

阅读量1.4k

点赞数 17

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/SM_Cute/article/details/136650328

<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"
            >