html表格制作虚拟长列表+冻结列

<template>

  <div class="content">

    <el-button type="primary" class="button1" @click="click1">搜索</el-button>

    <el-tabs v-model="activeName" @tab-click="handleClick">

      <el-tab-pane label="空运中心" name="first">空运中心</el-tab-pane>

      <el-tab-pane label="海运中心" name="second">海运中心</el-tab-pane>

    </el-tabs>

    <ul id="app">

      <div ref="listWrap" class="list-wrap" @scroll="scrollListener">

        <div ref="scrollBar" class="scroll-bar"></div>

        <table ref="list" border="1" class="list">

          <tr class="table-th">

            <th v-for="(item, i) in supplierlist" :key="i" :class="item.class">

              <span>{ { item.name }}</span>

            </th>

          </tr>

          <tr v-for="(item, i) in showList" :key="i" class="table-th2">

            <td class="fixtd" @dblclick="edit('number', i)">

              <input

                :ref="'input' + 'number'"

                class="input award-name"

                type="text"

                :disabled="modify"

                :value="item.number"

              />

            </td>

            <td class="fixtd1">

              <input

                class="input award-name"

                type="text"

                :value="item.mblNo"

                disabled

              />

            </td>

            <td class="fixtd2">

              <input

                class="input award-name"

                type="text"

                :value="item.containerNo"

                disabled

              />

            </td>

            <td class="fixtd3">

              <input

                class="input award-name"

                type="text"

                :value="item.destinCode"

                disabled

              />

            </td>

            <td>

              <input

                class="input"

                type="text"

                style="color: red"

                :value="item.ATA ? item.ATA.split('T')[0] : ''"

                disabled

                @blur="edit1"

              />

            </td>

            <td>

              <input

                class="input award-name"

                type="text"

                :value="item.ETA ? item.ETA.split('T')[0] : ''"

                disabled

                @blur="edit1"

              />

            </td>

            <td>

              <input

                class="input award-name"

                type="text"

                :style="item.uploadANDate === '否' ? 'color:red' : ''"

                :value="item.uploadANDate"

                disabled

                @blur="edit1"

              />

            </td>

            <td @dblclick="edit('payForAnotherState', i)">

              <input

                :ref="'input' + 'payForAnotherState'"

                class="input award-name"

                type="text"

                :value="item.payForAnotherState"

                :disabled="modify"

                @blur="edit1"

              />

            </td>

            <td>

              <input

                class="input award-name"

                type="text"

                :style="item.uploadDODate === '否' ? 'color:red' : '&