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>

我使用了以下方法，其中我正在更新treenode的id（这是从ajax调用插入的id中进行的。我只是进行了更改以清楚地说明问题）。

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

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

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

}

Answer 1

作用域插槽和插槽道具

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

如果必须访问父模板中的该数据，则需要使用插槽属性，并明确地将数据绑定到插槽模板中。因此，在el-tree组件模板中，您将数据绑定到插槽，如下所示：

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

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

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

default参数引用插槽名称，如果未指定，则命名为“默认”。

Here is a fiddle显示此行为。

*您可以阅读有关插槽和插槽道具here的更多信息。

Answer 2

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

fetch(
  `https://cors-anywhere.herokuapp.com/https://itunes.apple.com/search?term=${this.search}&entity=album`
)

而不是关注。

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

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

2 个答案: