@v1tal
看來你是用 v-for
來生成表格內容,這樣會產生一些問題,像是 Vue
有他自己內部 Dom
的監聽器,例如你用 v-for
,雖然看起來是普通的 Dom
,但是已經被記錄起來並持續偵測綁定資料使否改變,但是問題在於 DataTable
的運作機制,當你改變資料,例如進行 排序
,換頁
等動作時 DataTable
會重新渲染裡面的 Dom
,造成原本那些有著監聽機制的 Dom
給被洗掉,這樣整個會亂套。
最好的方式還是照著 Vue
原本的思路走,我是把 DataTable
給包在 Component
裡面,並用 props
來傳遞資料,這裡有個我寫的小小範例:
jsFiddle 線上範例
const MOCK_DATA = {
head: [
{title: 'ID'},
{title: '標題'}
],
body: [
[1, '測試資料1'],
[2, '測試資料2'],
[3, '測試資料3'],
[4, '測試資料4'],
[5, '測試資料5'],
[6, '測用資料6'],
]
}
Vue.component('data-table', {
props: ['head', 'data'],
template: '<table></table>',
data() {
return {
instance: null
}
},
watch: {
data: function(newData) {
if(this.instance) {
this.instance.clear();
this.instance.rows.add(newData);
this.instance.draw();
}
}
},
ready() {
this.instance = $(this.$el).dataTable({
columns: this.head,
data: this.data
}).api()
}
})
new Vue({
el: '#app',
data() {
return {
list: null
}
},
methods: {
fetch() {
setTimeout(() => {
this.list = MOCK_DATA
}, 500)
},
addMockData() {
let id = this.list.body[this.list.body.length - 1][0] + 1
this.list.body.push([
id,
`測試資料${id}`
])
}
},
ready() {
this.fetch()
}
})