怎样实现antdvue 点击树的子节点弹出该树的子节点的编辑框

你可以使用 `antdvue` 中的 `Tree` 组件来实现树形结构，然后在 `Tree` 的事件监听器中，获取当前点击的节点信息，并通过 `Modal` 组件来展示编辑框。

以下是一个简单的示例代码：

<template>
  <div>
    <a-button type="primary" @click="showModal">添加节点</a-button>
    <a-tree
      :tree-data="treeData"
      :default-expanded-keys="expandedKeys"
      :selected-keys="selectedKeys"
      :show-line="true"
      @select="onSelect"
    />
    <a-modal
      title="编辑节点"
      visible="{{ visible }}"
      :on-cancel="handleCancel"
      :on-ok="handleOk"
    >
      <a-form :form="formRef">
        <a-form-item label="节点名称" :colon="false">
          <a-input
            v-model="nodeTitle"
            :placeholder="'请输入节点名称'"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Tree, Modal, Form, Input, Button } from 'ant-design-vue';

export default {
  components: {
    'a-tree': Tree,
    'a-modal': Modal,
    'a-form': Form,
    'a-form-item': Form.Item,
    'a-input': Input,
    'a-button': Button,
  },
  setup() {
    const formRef = ref(null);
    const visible = ref(false);
    const nodeTitle = ref('');
    const selectedKeys = ref([]);
    const expandedKeys = ref([]);
    const treeData = ref([
      {
        title: '节点1',
        key: '1',
        children: [
          {
            title: '子节点1',
            key: '1-1',
          },
        ],
      },
      {
        title: '节点2',
        key: '2',
        children: [
          {
            title: '子节点2',
            key: '2-1',
          },
        ],
      },
    ]);

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = () => {
      const nodeKey = selectedKeys.value[0];
      const node = findNodeByKey(treeData.value, nodeKey);
      node.title = nodeTitle.value;
      visible.value = false;
    };

    const handleCancel = () => {
      visible.value = false;
    };

    const onSelect = (selectedKeys) => {
      if (selectedKeys.length > 0) {
        const nodeKey = selectedKeys[0];
        const node = findNodeByKey(treeData.value, nodeKey);
        nodeTitle.value = node.title;
        expandedKeys.value = findExpandedKeys(treeData.value, nodeKey);
      }
      selectedKeys.value = selectedKeys;
    };

    const findNodeByKey = (treeData, key) => {
      for (let i = 0; i < treeData.length; i++) {
        const node = treeData[i];
        if (node.key === key) {
          return node;
        } else if (node.children) {
          const result = findNodeByKey(node.children, key);
          if (result) {
            return result;
          }
        }
      }
      return null;
    };

    const findExpandedKeys = (treeData, key) => {
      const result = [];
      const findExpandedKeysHelper = (treeData, key) => {
        for (let i = 0; i < treeData.length; i++) {
          const node = treeData[i];
          if (node.key === key) {
            result.push(node.key);
            return true;
          } else if (node.children) {
            if (findExpandedKeysHelper(node.children, key)) {
              result.push(node.key);
              return true;
            }
          }
        }
        return false;
      };
      findExpandedKeysHelper(treeData, key);
      return result.reverse();
    };

    return {
      formRef,
      visible,
      nodeTitle,
      selectedKeys,
      expandedKeys,
      treeData,
      showModal,
      handleOk,
      handleCancel,
      onSelect,
    };
  },
};
</script>

在上面的代码中，我们使用 `ref` 创建了几个响应式变量来存储数据，如 `formRef`、`visible`、`nodeTitle`、`selectedKeys`、`expandedKeys` 和 `treeData`。

在 `setup` 函数中，我们创建了一些方法来处理事件，如 `showModal`、`handleOk`、`handleCancel` 和 `onSelect`。这些方法将在模板中被调用。

在模板中，我们使用 `a-tree` 组件来展示树形结构，并将 `treeData`、`expandedKeys` 和 `selectedKeys` 绑定到组件的属性上。

当用户点击某个节点时，会触发 `onSelect` 事件，我们在该事件中获取当前选中的节点信息，并将其展示在编辑框中。同时，我们还使用 `findExpandedKeys` 方法获取该节点的所有父节点，并将其展开。

当用户点击编辑框的确认按钮时，会触发 `handleOk` 事件，我们在该事件中更新当前选中节点的名称，并将编辑框隐藏。