首页 > 解决方案 > 如何在 vuetify2 中使用 v-simple-table 构建自动播放滚动表?

问题描述

我想用 vuetify 的 v-simple-table 构建一个自动播放滚动表,我该怎么做?

 <v-simple-table class="table" dense :dark="dark">
      <template v-slot:default>
        <thead>
          <tr>
            <th v-for="(header, index) in headers" :key="index">
              {{ header.text }}
            </th>
          </tr>
        </thead>

        <tbody @mouseover="stopScroll" @mouseleave="scroll">
          <tr
            v-for="(item, index) in showItems"
            :key="index"
            :class="{ lighten: index % 2 === 1 }"
          >
            <template v-for="(header, index) in headers">
              <td>
                <!-- 设置最小宽度 -->
                <v-responsive :min-width="getTdMinWidth(header)">
                  <!-- 设置最大宽度的处理 -->
                  <div
                    :class="{
                      'long-text': isTdTextTooLong(item[header.value])
                    }"
                  >
                    {{ item[header.value] }}
                  </div>
                </v-responsive>
              </td>
            </template>
          </tr>
        </tbody>
      </template>
    </v-simple-table>

就像这个页面的效果:http: //datav.jiaminghi.com/demo/construction-data/index.html

在此处输入图像描述

标签: vue.jsvuetify.jstransition

解决方案


推荐阅读