当前位置：首页 > 前端教程

elementui treekey=

2026-01-15 19:12:56前端教程

elementui tree key

在 Element UI 的 Tree 组件中，key 是一个重要的属性，用于唯一标识树节点。key 通常用于节点的选中、展开、折叠等操作。以下是关于 key 的详细说明和使用方法。

基本用法

在 Tree 组件的 data 属性中，每个节点对象可以包含一个 key 属性。这个 key 必须是唯一的，通常用于标识节点。

elementui treekey=

<el-tree
  :data="treeData"
  :props="defaultProps"
  node-key="id"
></el-tree>

配置 `node-key`

node-key 是 Tree 组件的一个属性，用于指定节点对象的哪个属性作为唯一标识。默认情况下，node-key 是 id，但可以自定义为其他属性名。

data() {
  return {
    treeData: [
      {
        id: 1,
        label: '一级节点',
        children: [
          {
            id: 2,
            label: '二级节点'
          }
        ]
      }
    ],
    defaultProps: {
      children: 'children',
      label: 'label'
    }
  }
}

动态生成 `key`

如果数据中没有现成的唯一标识符，可以通过方法动态生成 key。例如，使用 UUID 或其他唯一值生成器。

elementui treekey=

generateTreeData() {
  return [
    {
      id: this.generateUUID(),
      label: '一级节点',
      children: [
        {
          id: this.generateUUID(),
          label: '二级节点'
        }
      ]
    }
  ]
}

使用 `key` 进行操作

key 可以用于 Tree 组件的各种方法，例如获取选中节点、展开节点等。

this.$refs.tree.setCurrentKey(1) // 选中 key 为 1 的节点
this.$refs.tree.getCurrentKey() // 获取当前选中的节点 key

注意事项

key 必须是唯一的，否则可能导致操作异常。
如果数据中没有 key，可以通过 node-key 指定其他属性作为唯一标识。
动态生成的 key 需要确保在每次渲染时保持一致，避免节点状态丢失。

示例代码

以下是一个完整的示例，展示如何在 Element UI 的 Tree 组件中使用 key。

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    node-key="id"
    @node-click="handleNodeClick"
    ref="tree"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '一级节点',
          children: [
            {
              id: 2,
              label: '二级节点'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

通过以上方法，可以充分利用 key 属性在 Element UI 的 Tree 组件中实现节点的唯一标识和操作。