我正在使用vutify+nuxt创建我的Web应用程序，如果单元格的值发生变化，我如何将动画应用到单元格？
I tried to add a ref to my table element like:
<v-data-table ref="table" :items="data" :headers="headers"/>
然后
$this.$refs.table.$el.addEventListener('change', func)个
但什么都没发生...有谁能开个灯吗？
我正在使用vutify+nuxt创建我的Web应用程序，如果单元格的值发生变化，我如何将动画应用到单元格？
I tried to add a ref to my table element like:
<v-data-table ref="table" :items="data" :headers="headers"/>
然后
$this.$refs.table.$el.addEventListener('change', func)个
但什么都没发生...有谁能开个灯吗？
超过"value"个我相信你会对TD手机"textContent"的变化感兴趣.
The best would be tap in the function that does the content update.
Otherwise, use MutationObserver on the childList property for every TD of a specific table:
const contentsObserver = new MutationObserver((mutations) => {
mutations.forEach(mu => {
if (mu.type === "childList") {
mu.target.classList.add("is-changed");
mu.target.addEventListener("animationend", () => {
mu.target.classList.remove("is-changed");
}, {once: true});
}
});
});
const elsTD = document.querySelectorAll("tbody td");
elsTD.forEach(elTD => contentsObserver.observe(elTD, {childList: true}));
// Demo: dynamic textContent change
const rand = (min, max) => Math.random() * (max - min) + min;
const changeText = () => {
const index = ~~rand(0, elsTD.length);
const elTDActive = elsTD[index];
elTDActive.textContent = rand(1, 99).toFixed(2);
setTimeout(changeText, rand(300, 1300));
}
changeText();td, th {
padding: 0.5rem 1rem;
font: 1rem/1.5 monospace;
}
.is-changed {
animation: blink 1s;
}
@keyframes blink {
0% {
background: fuchsia;
}
}<table>
<thead>
<tr>
<th></th>
<th>Foo</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<th>Baz</th>
<td>23.00</td>
<td>56.45</td>
</tr>
<tr>
<th>Daz</th>
<td>34.46</td>
<td>89,20</td>
</tr>
</tbody>
</table>