树节点 ID 未更新。元素 UI Vue

Question

<el-tree :data="Project">
       <span class="custom-tree-node" slot-scope="{ node, data }" v-contextmenu:contextmenu>
            <el-input
              placeholder="Please input"
              v-model.trim="data.label"
              @blur="saveOrDiscard(node, data)"
            ></el-input>
          </span>
      </el-tree>

我使用了下面的方法，我正在更新树节点的 ID（来自 ajax 调用插入的 ID。我只是简单地更改以清楚地解释问题）。

但是树的数据（我作为项目给出的）没有更新。下次它显示 0 值（我已将其设置为默认值）。

public saveOrDiscard(node: TreeNode<any, TreeData>, data: TreeData) {

    //Following 456 is not updating in tree data.
    node.data.id = 456;

}

Answer 1

Scoped Slots 和 Slot Props

el-tree 是一个带槽的组件，默认情况下，槽只能访问与包含模板的其余部分相同的实例属性。因此，例如，插槽无法访问 :data.

如果您必须在父模板中访问此数据，则需要使用 slot props 并显式绑定插槽模板中的数据。所以在 el-tree 组件模板中，你像这样将数据绑定到插槽：

<slot :data="data"></slot>

然后在父模板中，您可以通过 v-slot 指令访问数据，如下所示：

<template v-slot:default="slotProps">
    {{ slotProps.data }}
</template>

default参数指的是插槽名称，如果指定none，则命名为"default"。

Here is a fiddle 显示此行为。

*您可以阅读更多关于老虎机和老虎机道具的信息here。

Answer 2

如下绑定模糊事件对我有用。

@blur="() => saveOrDiscard(node, data)"

而不是关注。

@blur="saveOrDiscard(node, data)"

树节点 ID 未更新。元素 UI Vue

Tree Node Id not updating. Element UI Vue

javascript

typescript

vue.js

vuejs2

element-ui