Javascript Vue表转换
我试图在我的表中添加转换延迟。我正在使用vuexy(vuesax)表,我想在加载时添加一些漂亮的动画。我已经这样定义了TransitionLay:Javascript Vue表转换,javascript,vue.js,vuejs2,vue-component,vuesax,Javascript,Vue.js,Vuejs2,Vue Component,Vuesax,我试图在我的表中添加转换延迟。我正在使用vuexy(vuesax)表,我想在加载时添加一些漂亮的动画。我已经这样定义了TransitionLay: style () { return { left:this.cords.left, top:this.cords.top, transitionDelay: this.active ? this.delay : '0s', background:_color.getColor
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>
国家
销售额
产品
配件
篮子
交货
数量
{{data[indextr].country}
{{data[indextr].sales}
{{data[indextr].products}
{{data[indextr].附件}
{{data[indextr].basket}
{{data[indextr].deliveries}
{{data[indextr].amount}
如您所见,我添加了
:style=“[{transitionDelay:[data*0.1)+'s'}]
,但甚至没有错误我认为应该是:
:style="[{transitionDelay: (indextr * 0.1) + 's'}]