vue3单条数据轮播（亲测-比el-table轮播简单）

 <div class="mytable">

      <ul class="factorDate">

        <li class="lili">

          <el-row :gutter="5">

          <el-col :span="4">时间</el-col>

          <el-col :span="4">监测点</el-col>

          <el-col :span="4">因子名称</el-col>

          <el-col :span="4">因子浓度值</el-col>

          <el-col :span="4">缺省计量单位</el-col>

          <el-col :span="4">因子阀值</el-col>

        </el-row>

        </li>

        <div class="dateS">

        <vue3-seamless-scroll :list="tableData.factorDate" :class-option="{ direction: 1 }" step="0.2" hover="true" hover-stop="true">

          <li class="lili1" v-for="(item, index) in tableData.factorDate">

            <el-row :gutter="5">

            <el-col :span="4">{{ item.createdTime }}</el-col>

            <el-col :span="4">{{ item.ptName }}</el-col>

            <el-col :span="4"> {{ item.chName }}</el-col>

            <el-col :span="4">{{ item.concenVal }}</el-col>

            <el-col :span="4">{{ item.concentrationUnit }}</el-col>

            <el-col :span="4">{{ item.maxVal }}</el-col>    

          </el-row>      

            </li>

          </vue3-seamless-scroll>

        </div>

      </ul>

css

.mytable{

  background-color: transparent !important;

  background-image: url(@/assets/dashboard/lunbo.png); //这个是我引入的背景图片

  background-size: cover; /* 或者其他合适的取值 */

  position: absolute;

  background-repeat: no-repeat;

  top: 75px;

  left: 35.1%;

  width: 971px;

  height: 61px;

  .factorDate {

    height:60px;

    margin-left: 70px;

  }

  .lili {

    color: #bae9f3;

    font-size: 13px;

  }

  .lili1 {

    color: #fdfdfd;

    font-size: 15px;

  }

  .dateS{

    height: 30px;

    overflow: hidden;

  }

}

采用 vue3-seamless-scroll组件 step 控制轮播速度