Question

我正在vue js中使用数据表1.10.19。在这里，我通过单击某些按钮来过滤动态表格，该表格会过滤并用新数据替换表格到表格的tr标签中。如何用新内容刷新表格？我使用了clear，destroy，但是没有任何效果。这是我的全部代码。

Code Link

Answer 1

像这样更新您的代码，它应该可以工作

$('.reportDataTableModelWise').DataTable().destroy();

从this.$store.commit('modelWiseTabularReport');调用数据之前

并像这样更新更新的代码

this.$nextTick(function() {
        $('.reportDataTableModelWise').DataTable({
            'destroy'     : true,
            'paging'      : true,
            'lengthChange': true,
            'searching'   : true,
            'ordering'    : true,
            'order'       : [[ 5, 'desc' ]],
            'info'        : true,
            'autoWidth'   : false,
            'dom'         : 'Blfrtip',
            'buttons'     : [
                {
                    'extend': 'csv',
                    'title': this.$route.meta.report_name + ' Report'
                },
                {
                    'extend': 'pdf',
                    'title': this.$route.meta.report_name + ' Report'
                },
                {
                    'extend': 'print',
                    'title': this.$route.meta.report_name + ' Report'
                }
            ]
        });
    });

$nextTick对于确保Vue在重新初始化之前已将新数据刷新到DOM是必需的。

Answer 2

您还可以使用来重绘表格：

   ...
   watch: {
     myData () { // data used in the table
       this.$nextTick (() => { // wait until data fully updated before re-render new DOM 
         $('.reportDataTableModelWise').DataTable().draw();
       })
     }
   }

如何在vuejs中使用新数据刷新数据表？

2 个答案: