使用 VueJS 填充的 html 表销毁和重新渲染 DataTable

Posted

技术标签:

【中文标题】使用 VueJS 填充的 html 表销毁和重新渲染 DataTable【英文标题】:Destroying and re-rendering DataTable using html table populated by VueJS 【发布时间】:2020-08-24 02:07:56 【问题描述】:

我正在使用 Ajax 从数据库中获取数据,并使用 VueJS 在 html 表中显示它们。我让用户对数据执行一些操作(添加新行、编辑、删除)。它工作得很好。

我的问题是我想放置一个 DataTable 以允许用户执行研究并对表中的行进行排序。我只是在做: $('my-table').DataTable();在 Vue 已经显示的 HTML 表格上。它一直有效,直到我想对我的数据进行更改。它们在 Vue 实例中已更改,但未在 DataTable 中呈现。

现在我尝试在我的 DataTable 上使用 destroy() 方法然后重新制作和实例化,我有一个奇怪的结果,这是我想要更新我的 DataTable 时的代码:

 $('my-table').DataTable().destroy();
 // Here I'm getting the data and put it in the Vue instance
 // Once it's done I simply re-mount the DataTable :
 $('my-table').DataTable();

并且它不会更新,它会将已经存在的行加倍或显示我插入的行,直到我更改当前页面。

更奇怪的是,如果我这样做了:

  $('my-table').DataTable().destroy();
  // Here I'm getting the data and put it in the Vue instance

所以现在它是我页面上的一个简单的 HTML 表格,用 Vue 正确更新,我在控制台中输入:

$('my-table').DataTable()

而且效果很好。我不明白,因为它和上面的完全一样,只是我是从控制台输入的,对吧?

我希望它足够清楚。已经谢谢了!

【问题讨论】:

【参考方案1】:

Vue 可能在这里与 DataTable 竞争 DOM 元素。

如果您使用$('my-table').DataTable(),它会通过 DOM 位置引用表格。

使用 Vue 时,最好使用 $ref 来引用元素。

Vue 在后台做了一些魔术,只允许重新渲染更改的对象。所以看起来当你销毁和创建一个新对象时,Vue 没有办法知道它发生了变化,也没有重新渲染它。

有几种方法适合你。

为DataTable 元素使用一个键。当有变化时更新键,这将重绘元素 你可以在函数末尾尝试this.$forceUpdate(); 你也可以试试this.$nextTick().then(()=>$('my-table').DataTable())

【讨论】:

感谢您的回答。我尝试使用$this.$forceUpdate();,但它并没有改变任何东西。如何更新我的 DataTable 元素的键?我实际上使用了一个,但是一旦我销毁它,我必须重新使用 DOM 元素来定位它吗? 她回答了有关密钥和重新安装的相关问题***.com/questions/47459837/… 非常感谢您的帮助,我刚刚尝试过,效果很好! :)

以上是关于使用 VueJS 填充的 html 表销毁和重新渲染 DataTable的主要内容,如果未能解决你的问题,请参考以下文章

vuejs怎样实现列表中checkbox的双向绑定及初始化渲

vuejs怎样实现列表中checkbox的双向绑定及初始化渲

从本地存储动态重新填充表行

在 vuejs2 的 vnode 上下文中销毁 watch

VueJS2表:如何添加过滤器[重复]

使用 JQUERY 和 AJAX 在 Laravel 分页中重新填充表数据