vue3 el-tree 根据key进行数据回显 typescript

在Vue 3中，可以使用`el-tree`组件根据给定的key值进行数据回显。以下是一个使用TypeScript的示例：

首先，在Vue组件中引入`el-tree`组件和相关数据：

<template>
  <div>
    <el-tree :data="treeData" :default-expanded-keys="[defaultExpandedKey]" :default-checked-keys="[defaultCheckedKey]"></el-tree>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      treeData: [
        {
          label: 'Node 1',
          key: '1',
          children: [
            {
              label: 'Node 1-1',
              key: '1-1',
              children: [
                {
                  label: 'Node 1-1-1',
                  key: '1-1-1'
                },
                {
                  label: 'Node 1-1-2',
                  key: '1-1-2'
                }
              ]
            },
            {
              label: 'Node 1-2',
              key: '1-2',
              children: [
                {
                  label: 'Node 1-2-1',
                  key: '1-2-1'
                },
                {
                  label: 'Node 1-2-2',
                  key: '1-2-2'
                }
              ]
            }
          ]
        }
      ],
      defaultExpandedKey: '1-1', // 默认展开的节点key
      defaultCheckedKey: '1-2-2' // 默认选中的节点key
    };
  }
});
</script>

在上述示例中，我们使用了`defineComponent`导入Vue的`defineComponent`函数，以支持TypeScript的类型推断。

在`data`中，我们定义了`treeData`数组，包含树形结构数据。每个节点对象都有`label`和`key`属性，用于显示节点名称和唯一标识节点。使用`children`属性来表示子节点。

在`el-tree`组件中，通过`:default-expanded-keys`属性可以设置默认展开的节点。在这个例子中，我们设置了`defaultExpandedKey`为`1-1`，表示默认展开的节点是`Node 1-1`。

同样地，通过`:default-checked-keys`属性可以设置默认选中的节点。在这个例子中，我们设置了`defaultCheckedKey`为`1-2-2`，表示默认选中的节点是`Node 1-2-2`。

根据需求，你可以将`defaultExpandedKey`和`defaultCheckedKey`设置为你想要的节点key值，来实现根据key进行数据回显。