diff --git a/docs/assets/faq/en/20-How to use VTable in Vue.md b/docs/assets/faq/en/20-How to use VTable in Vue.md index e22fa1a96..5813a9905 100644 --- a/docs/assets/faq/en/20-How to use VTable in Vue.md +++ b/docs/assets/faq/en/20-How to use VTable in Vue.md @@ -6,10 +6,13 @@ VTable does not encapsulate the Vue component, so how do you VTable in Vue? ## Solution -In Vue 3.x, using VTable +It is recommended to use Vtable in Vue 3.x. If you use vue2, it may cause performance problems. For example, binding the instance of table to the vue component `this.tableInstance = new VTable.ListTable(dom, option)` will cause vue's Responsiveness monitors all changes to the tableInstance attribute, causing table performance to look poor. (If you need to save the variable, you can place it on the window first). -Composition API, you can refer to[ the online demo ](https://codesandbox.io/p/devbox/magical-nash-t6t33f)for details. +The following code uses Vue3! +Composite API usage: + +You can refer to[ the online demo ](https://codesandbox.io/p/devbox/magical-nash-t6t33f)for details. ## Code Example @@ -353,12 +356,10 @@ onMounted(() => { ``` - ## Results - [Online demo](https://codesandbox.io/p/sandbox/wizardly-dream-ktf74n) - ## Related Documentation -- [GitHub](https://github.com/VisActor/VTable) \ No newline at end of file +- [GitHub](https://github.com/VisActor/VTable) diff --git a/docs/assets/faq/zh/20-How to use VTable in Vue.md b/docs/assets/faq/zh/20-How to use VTable in Vue.md index 4695a7e62..3d3fc01ec 100644 --- a/docs/assets/faq/zh/20-How to use VTable in Vue.md +++ b/docs/assets/faq/zh/20-How to use VTable in Vue.md @@ -2,13 +2,17 @@ ## 问题描述 -VTable没有封装Vue组件,那么如何在 Vue 中VTable呢? +VTable 没有封装 Vue 组件,那么如何在 Vue 中 VTable 呢? ## 解决方案 -在 Vue 3.x 中使用 Vtable +建议在 Vue 3.x 中使用 Vtable,如果使用 vue2 可能造成性能问题,如将 table 的实例绑定到 vue 组件上`this.tableInstance = new VTable.ListTable(dom, option)`,这样会导致 vue 的响应式去监听了 tableInstance 属性的所有变更,导致表格性能看上去不太好。(如果需要保存变量可以先放置到 window 上)。 -组合式 API,具体可以[参考在线 demo](https://codesandbox.io/p/devbox/magical-nash-t6t33f) +以下代码使用基于 Vue3 ! + +组合式 API 用法: + +具体可以[参考在线 demo](https://codesandbox.io/p/devbox/magical-nash-t6t33f) 不同的表格,封装方式都是类似的 @@ -145,12 +149,10 @@ onMounted(() => { ``` - ## 结果展示 - [在线效果参考](https://codesandbox.io/p/sandbox/wizardly-dream-ktf74n) - ## 相关文档 -- [GitHub](https://github.com/VisActor/VTable) \ No newline at end of file +- [GitHub](https://github.com/VisActor/VTable) diff --git a/docs/assets/guide/en/Developer_Ecology/vue.md b/docs/assets/guide/en/Developer_Ecology/vue.md index ddb2ee243..257ad5365 100644 --- a/docs/assets/guide/en/Developer_Ecology/vue.md +++ b/docs/assets/guide/en/Developer_Ecology/vue.md @@ -1,9 +1,12 @@ ## How to use VTable in Vue? -In Vue 3.x, using VTable +It is recommended to use Vtable in Vue 3.x. If you use vue2, it may cause performance problems. For example, binding the instance of table to the vue component `this.tableInstance = new VTable.ListTable(dom, option)` will cause vue's Responsiveness monitors all changes to the tableInstance attribute, causing table performance to look poor. (If you need to save the variable, you can place it on the window first). -Composition API, you can refer to[ the online demo ](https://codesandbox.io/p/devbox/magical-nash-t6t33f)for details. +The following code uses Vue3! +Composite API usage: + +You can refer to[ the online demo ](https://codesandbox.io/p/devbox/magical-nash-t6t33f)for details. ## Code Example @@ -142,8 +145,7 @@ onMounted(() => { If you need to use ref to save table instances, please use `shallowRef`. Using `ref` will affect internal attribute updates and cause rendering exceptions. - ``` const tableInstance = shallowRef(); tableInstance.value = new ListTable(listTableRef.value, option); -``` \ No newline at end of file +``` diff --git a/docs/assets/guide/zh/Developer_Ecology/vue.md b/docs/assets/guide/zh/Developer_Ecology/vue.md index 957ff6bb6..4863e445c 100644 --- a/docs/assets/guide/zh/Developer_Ecology/vue.md +++ b/docs/assets/guide/zh/Developer_Ecology/vue.md @@ -1,8 +1,12 @@ ## 如何在 Vue 中使用 VTable? -在 Vue 3.x 中使用 Vtable +建议在 Vue 3.x 中使用 Vtable,如果使用 vue2 可能造成性能问题,如将 table 的实例绑定到 vue 组件上`this.tableInstance = new VTable.ListTable(dom, option)`,这样会导致 vue 的响应式去监听了 tableInstance 属性的所有变更,导致表格性能看上去不太好。(如果需要保存变量可以先放置到 window 上) -组合式 API,具体可以[参考在线 demo](https://codesandbox.io/p/devbox/magical-nash-t6t33f) +以下代码使用基于 Vue3 ! + +组合式 API 用法: + +具体可以[参考在线 demo](https://codesandbox.io/p/devbox/magical-nash-t6t33f) ## 代码示例 @@ -139,10 +143,9 @@ onMounted(() => { ## 注意 -如果需要使用ref保存table实例,请使用`shallowRef`,使用`ref`会影响内部属性更新,导致渲染异常。 - +如果需要使用 ref 保存 table 实例,请使用`shallowRef`,使用`ref`会影响内部属性更新,导致渲染异常。 ``` const tableInstance = shallowRef(); tableInstance.value = new ListTable(listTableRef.value, option); -``` \ No newline at end of file +```