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

要实现这个功能，你需要进行以下步骤：

1. 安装 antd-vue，以及其他依赖项。

2. 创建一个树形组件，使用 antd-vue 中的 Tree 组件来实现。

3. 在 Tree 组件中添加一个点击事件，当用户点击树形节点时触发该事件。

4. 在点击事件中，判断点击的节点是否为叶子节点（即没有子节点），如果是叶子节点，则弹出编辑框。

5. 在编辑框中添加保存和取消按钮，当用户点击保存按钮时，将编辑后的数据保存到后端服务器上。

6. 在保存成功后，将编辑框关闭，并且更新树形组件中对应的节点数据。

下面是一个简单的示例代码，仅供参考：

<template>
  <div>
    <a-tree :tree-data="treeData" :show-icon="true" :switcher-icon="switcherIcon" @select="handleSelect"></a-tree>
    <a-modal v-model="modalVisible" title="编辑" @ok="handleOk" @cancel="handleCancel">
      <a-input v-model="editValue"></a-input>
    </a-modal>
  </div>
</template>

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

export default {
  components: {
    'a-tree': Tree,
    'a-modal': Modal,
    'a-input': Input,
  },
  data() {
    return {
      treeData: [
        {
          title: 'Parent 1',
          key: '0-0',
          children: [
            {
              title: 'Child 1-1',
              key: '0-0-0',
            },
            {
              title: 'Child 1-2',
              key: '0-0-1',
            },
          ],
        },
        {
          title: 'Parent 2',
          key: '0-1',
          children: [
            {
              title: 'Child 2-1',
              key: '0-1-0',
            },
            {
              title: 'Child 2-2',
              key: '0-1-1',
            },
          ],
        },
      ],
      switcherIcon: {
        open: 'a-icon-audit',
        close: 'a-icon-audit',
      },
      modalVisible: false,
      editValue: '',
      editNodeKey: '',
    };
  },
  methods: {
    handleSelect(selectedKeys, e) {
      const node = e.node;
      if (!node.children || node.children.length === 0) {
        this.editNodeKey = node.key;
        this.editValue = node.title;
        this.modalVisible = true;
      }
    },
    handleOk() {
      // 保存数据到后端服务器
      this.modalVisible = false;
      this.editValue = '';
      this.editNodeKey = '';
    },
    handleCancel() {
      this.modalVisible = false;
      this.editValue = '';
      this.editNodeKey = '';
    },
  },
};
</script>

在这个示例中，我们使用了 antd-vue 中的 Tree、Modal 和 Input 组件，其中 Tree 组件用来展示树形结构，Modal 组件用来弹出编辑框，Input 组件用来输入编辑的内容。

在 handleSelect 方法中，我们判断当前点击的节点是否为叶子节点（即没有子节点），如果是，则弹出编辑框，并将编辑的内容初始化为该节点的标题。

在 handleOk 方法中，我们可以将编辑的内容保存到后端服务器，然后关闭编辑框，并清空编辑的内容和编辑的节点键值。

在 handleCancel 方法中，我们只需要关闭编辑框，并清空编辑的内容和编辑的节点键值。