Vue3中基于无缝滚动组件vue3-seamless-scroll实现table内容区自动滚动

实现效果

vue3-seamless-scroll目前有Vue3、Vue2、JavaScript版本。

效果完整代码：

<template>
  <div class="table-con">
        <ul>
          <li class="nums">序号</li>
          <li v-for="(item, index) in tableCols" :key="index" :style="{width: item.width}">{{ item.label }}</li>
        </ul>

        <vue3-seamless-scroll 
          v-if="tablelist.length"
          :list="tablelist"
          :direction="top"
          :step="0.5"
          :hover="true">
          <ul v-for="(item, index) in tablelist" :key="index">
            <li class="nums">{{ index + 1 < 10 ? `0${index + 1}` : index + 1}}</li>
            <li class="name" :title="item.name">{{ item.name }}</li>
            <li>{{ item.regionName }}</li>
            <li>{{ item.startDate }}</li>
            <li>{{ item.finishDate }}</li>
            <li class="constructionCompany" :title="item.constructionCompany">
              {{ item.constructionCompany }}
            </li>
            <li class="supervisorCompany" :title="item.supervisorCompany">
              {{ item.supervisorCompany }}
            </li>
            <li class="finishRate">
              <el-progress :text-inside="true" :stroke-width="12" :percentage="item.finishRate" color="#42A2FF"></el-progress>
            </li>
            <li>
              <img src="@/assets/images/overviewConstruction/rate.png" alt="">
              {{
                item.monthRateStr +'%'
              }}
            </li>
            <li class="info">
              <span type="text" size="small" style="color: #fff; cursor: pointer;" @click="goNext(item)">前往》</span>
            </li>
          </ul>
        </vue3-seamless-scroll>

        <p v-else style="color: #ccc; text-align: center; line-height: 300px;">暂无数据</p>

      </div>
</template>

<script setup>
const tableCols = ref([
  {
    label: "col1",
    prop: "name",
    width: "270px",
  },
  {
    label: "col2",
    prop: "regionName",
    width: "180px",
  },
  {
    label: "col3",
    prop: "startDate",
    width: "180px",
  },
  {
    label: "col4",
    prop: "finishDate",
    width: "180px",
  },
  {
    label: "col5",
    prop: "constructionCompany",
    width: "400px",
  },
  {
    label: "col6",
    prop: "supervisorCompany",
    width: "400px",
  },
  {
    label: "整体进度",
    prop: "finishRate",
    width: "400px",
  },
  {
    label: "本月推进",
    prop: "monthRateStr",
    width: "180px",
  },
  {
    label: "col9",
    prop: "info",
    width: "100px",
  },
])

let tablelist = ref([]); //接口返回的列表数据


</script>

<style scoped lang="scss">
.table-con {
      width: 100%;
      height: 840px;
      padding: 20px 20px 25px 20px;
      overflow: hidden;

      ul, li {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      ul {
        display: flex;
        width: 100%;

        li {
          width: 180px;
          height: 36px; 
          line-height: 36px;
          text-align: left;
          color: #FFF;
          font-family: "Alibaba PuHuiTi";
          font-size: 14px;
          font-style: normal;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-right: 40px;
          font-weight: normal;

          // 设置各列宽度与table头对应
          &.nums {
            width: 80px;
          }

          &.name {
            width: 270px;
          }

          &.constructionCompany,
          &.supervisorCompany,
          &.finishRate  {
            width: 400px;
          }

          &.info {
            width: 100px;
          }

          &:last-child {
            margin-right: 0;
          }
        }
      }

      >div {
        width: 100%;
        height: 95%;
        overflow: hidden;
      }
      
      :deep(.el-select .el-input__wrapper) {
        background-color: #1552C8;
      }

      :deep(.el-select .el-input__inner) {
        color: #fff;
      }

      :deep(.el-pager li) {
        background-color: #0b258a;
        color: #fff;

        &.is-active {
          background-color: #fff;
          color: #1552C8;
        }
      }

      :deep(.el-input__wrapper) {
        background-color: #0b258a;
        color: #fff;
      }

      :deep(.el-input__inner) {
        color: #fff;
      }

      :deep(.el-input__wrapper.is-focus) {
        box-shadow:  0 0 0 1px #18e3ff inset !important;
        &:hover {
          box-shadow:  0 0 0 1px #18e3ff inset !important;
        }
      } 

      :deep(.el-select .el-input.is-focus .el-input__wrapper) {
        box-shadow:  0 0 0 1px #18e3ff inset !important;
        &:hover {
          box-shadow:  0 0 0 1px #18e3ff inset !important;
        }
      } 

      :deep(.el-input__wrapper) {
        box-shadow:  0 0 0 1px #18e3ff inset !important;
      }
      
      :deep(.el-scrollbar) {
        background-color: #0b258a !important;
      }

      :deep(.el-scrollbar__wrap) {
        background-color: #0b258a;
      }
    }
</style>

limitScrollNum：开启滚动的数据量，只有列表长度大于等于该值才会滚动。

点击可查看更多属性