search

x-extends / vxe-table

Vxe table 的表格组件
https://vxetable.cn
MIT License
7.58k stars 1.05k forks source link

VxeGrid 动态修改 menu-config 出现异常 #2509

Open Clover-You opened 2 months ago

Clover-You commented 2 months ago

可复现的链接（包含复现链接与示例代码）：

https://vxe-table-bug-example.ctong.top/2509

--

问题描述与截图：

修改 menu-config 配置后抛出异常

const menuConfig = reactive<VxeTablePropTypes.MenuConfig>({
  enabled: true,
  body: {
    options: [[{ name: '删除', code: 'remove' }]],
  },
})

// 这行代码会导致组件抛出异常
menuConfig.enabled = !menuConfig.enabled
DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insert (http://localhost:5174/node_modules/.vite/deps/chunk-UQ7B67TF.js?v=fe3dd58f:9711:12)
    at processCommentNode (http://localhost:5174/node_modules/.vite/deps/chunk-UQ7B67TF.js?v=fe3dd58f:5925:7)
    at patch (http://localhost:5174/node_modules/.vite/deps/chunk-UQ7B67TF.js?v=fe3dd58f:5828:9)
    at patchKeyedChildren (http://localhost:5174/node_modules/.vite/deps/chunk-UQ7B67TF.js?v=fe3dd58f:6901:11)
    at patchChildren (http://localhost:5174/node_modules/.vite/deps/chunk-UQ7B67TF.js?v=fe3dd58f:6683:11)
    at patchElement (http://localhost:5174/node_modules/.vite/deps/chunk-UQ7B67TF.js?v=fe3dd58f:6149:7)
    at processElement (http://localhost:5174/node_modules/.vite/deps/chunk-UQ7B67TF.js?v=fe3dd58f:5995:7)
    at patch (http://localhost:5174/node_modules/.vite/deps/chunk-UQ7B67TF.js?v=fe3dd58f:5852:11)
    at ReactiveEffect.componentUpdateFn [as fn] (http://localhost:5174/node_modules/.vite/deps/chunk-UQ7B67TF.js?v=fe3dd58f:6572:9)
    at ReactiveEffect.run (http://localhost:5174/node_modules/.vite/deps/chunk-UQ7B67TF.js?v=fe3dd58f:465:19)

期望的结果：

No response

操作系统：

MacOS/Windows

浏览器版本：

Chrome 121.0.6167.139

vue 版本：

^3.4.36

vxe-pc-ui 版本：

^4.0.90

vxe-table 版本：

^4.7.61

是否使用当前最新版本？

Clover-You commented 2 months ago

以下方法可以解决，但我并不了解为什么！在 Vue Issue 中我找到了好多个这种问题，都是使用 v-if 操作vue dom导致，但是我看评论一头雾水看不懂...如果有人知道，可以简单讲解一下么？

在isMenu下方紧跟着一个元素就可以解决

image

或者使用一个元素将其包裹

image