javascript - Vue 表格转换

Question

我正在尝试在我的桌子上添加转换延迟。我正在使用 vuexy (vuesax) 表，我想在加载时添加一些不错的动画。我已经像这样定义了transitionDelay：

style () {
      return {
        left:this.cords.left,
        top:this.cords.top,
        transitionDelay: this.active ? this.delay : '0s',
        background:_color.getColor(this.color, 1),
        width: this.widthx
      }

它适用于其他一些组件，例如：

        <transition-group class="todo-list" name="list-enter-up" tag="ul" appear>
            <li
              class="cursor-pointer todo_todo-item"
              v-for="(task, index) in taskList"
              :key="String(currFilter) + String(task.id)"
              :style="[{transitionDelay: (index * 0.1) + 's'}]">

              <todo-task :taskId="task.id" @showDisplayPrompt="showDisplayPrompt($event)" :key="String(task.title) + String(task.desc)" />
               
            </li>
        </transition-group>
    </component>

在这里效果很好，但在桌子上没那么多。这是表中的代码：

<template>
<div class="vx-col w-full">
<vx-card>
<div slot="no-body" class="mt-4">
  <vs-table  :data="products" class="table-dark-inverted">
    <template slot="thead">
      <vs-th sort-key="country">Country</vs-th>
      <vs-th sort-key="sales">Sales</vs-th>
      <vs-th sort-key="products">Products</vs-th>
      <vs-th sort-key="accessories">Accessories</vs-th>
      <vs-th sort-key="basket">Basket</vs-th>
      <vs-th sort-key="deliveries">Deliveries</vs-th>
      <vs-th sort-key="amount">Amount</vs-th>
    </template>

    <template slot-scope="{data}">
      <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data" :style="[{transitionDelay: (data * 0.1) + 's'}]">

        <vs-td :data="data[indextr].country">
        <img height="15" :src="data[indextr].image" :alt="data[indextr].country">
          {{ data[indextr].country }}
        </vs-td>

        <vs-td :data="data[indextr].sales">
          {{ data[indextr].sales }}
        </vs-td>

        <vs-td :data="data[indextr].products">
          {{ data[indextr].products }}
        </vs-td>

        <vs-td :data="data[indextr].accessories">
          {{ data[indextr].accessories }}
        </vs-td>
        
        <vs-td :data="data[indextr].basket">
          {{ data[indextr].basket }}
        </vs-td>

        <vs-td :data="data[indextr].deliveries">
          {{ data[indextr].deliveries }}
        </vs-td>

        <vs-td :data="data[indextr].amount">
          {{ data[indextr].amount }}
        </vs-td>

      </vs-tr>
    </template>
    </vs-table>
</div>
    </vx-card>
    </div>
</template>

如您所见，我已添加:style="[{transitionDelay: (data * 0.1) + 's'}]但甚至没有错误

Answer 1

我认为应该是：

:style="[{transitionDelay: (indextr * 0.1) + 's'}]