vue写个表格,让它滚动起来,没有用datav,有的时候结合会出错,一种简单的方法,直接用animation

时间:2024-10-24 16:00:44

表格样式就先不说了哈,这些简单内容,如果粉丝朋友还有什么问题,可以私信

好啦,首先,第一步

1.在目录的这个地方创建文件夹css,里面放两个文件

.

第一个文件里面内容

第二个文件里面内容

.drawCur{

  cursor: url(../img/map/draw_2.png),auto;

}

.cesium-credit-logoContainer{

  display: none!important;

}

.vl-notify.vl-notify-alert h2.vl-notice-title .lv-icon-maxmini i {

  cursor: pointer;

  width: 16px;

  height: 16px;

  margin-left: 20px;

  line-height: 30px;

  display: inline-block;

  vertical-align: middle;

  position: relative;

  color: white;

}

.vl-notify.vl-notify-alert h2.vl-notice-title .lv-icon-maxmini i.vlicon-max {

  display:none;

}

.vl-notify.vl-notify-alert h2.vl-notice-title .lv-icon-maxmini i.vlicon-huanyuan {

  background: url(/img/icon.551539f8.png) no-repeat;

  background-position: -65px -40px;

  color: white;

}

2...准备好之后去mainjs里面注册

import "@/assets/css/animation.css"

3.最后去组件中使用(这里方便操作,表格我们就不使用组件了,更方便一些)

  <div class='table-container' @mouseover='stopScroll' @mouseout='startScroll'>

      <div class='table-header-wrapper'>

        <table>

          <thead>

          <tr>

            <th>编号</th>

            <th>高级功能</th>

            <th>时间</th>

            <th>原因</th>

          </tr>

          </thead>

        </table>

      </div>

      <div class='table-body-wrapper'>

        <table>

          <tbody ref='tbodyRef'>

          <tr

            v-for='(item, index) in fullData'

            :key='index'

            :class="index % 2 === 0 ? 'even-row' : 'odd-row'"

          >

            <td>{{ item.id }}</td>

            <td>{{ item.troubleTypeid }}</td>

            <td>{{ item.airvalue }}</td>

            <td>{{ item.because }}</td>

          </tr>

          </tbody>

        </table>

      </div>

    </div>

script中,,这里数据写你们自己的内容哈,我的就不放了

  data() {

      return {

        scrollOffset: 0,

      rowHeight: 40, // 假设每行高度是40px

      fullData: [],

        data: [

          { id: '', troubleTypeid: '', airvalue: '', because: '' },

        ],

        paginationData: {

          current: 1,

          pageSize: 3

        }

      }

    },

    mounted() {

    this.fullData = [...this.data, ...this.data] // 将数据翻倍以实现无缝滚动

    this.startScroll()

  },

方法当中放两个函数

  startScroll() {

        console.log("进入 startScroll")

      const tbody = this.$refs.tbodyRef

      const rowHeight = this.rowHeight // 假设每行高度是40px

      const totalHeight = rowHeight * this.fullData.length

      console.log("进入 startScroll",totalHeight)

      tbody.style.animation = `scroll ${totalHeight / 40}s linear infinite`

      // 开始动画

      tbody.style.animationPlayState = 'running'

    },

    stopScroll() {

      const tbody = this.$refs.tbodyRef

      tbody.style.animationPlayState = 'paused'

    },

就可以实现啦,看我的文章,每一篇,绝对都是有收获的!!!!!!!!