三、antd design vue tree 悬浮文字修改

效果

上代码

<template>
  <a-tree :load-data="onLoadData" :tree-data="treeData" v-model:expandedKeys="expandedKeys"
    v-model:selectedKeys="selectedKeys">
    <template v-slot:title="nodeData">
      <a-button-group style="float:right">
        <a-popover placement="right">
          <template #content>
            <p>title：{{nodeData.title}}</p>
            <p>key：{{nodeData.key}}</p>
          </template>
          <span>{{nodeData.title}}</span>
        </a-popover>
      </a-button-group>
    </template>
  </a-tree>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { TreeDataItem } from 'ant-design-vue/es/tree/Tree';

export default defineComponent({
  setup() {
    const expandedKeys = ref<string[]>([]);
    const selectedKeys = ref<string[]>([]);
    const treeData = ref<TreeDataItem[]>([
      { title: '毛蛋', key: '0' },
      { title: '二蛋', key: '1' },
      { title: '鸡蛋', key: '2', isLeaf: true },
    ]);
    const onLoadData = (treeNode: any) => {
      console.log(treeNode, 19)
      return new Promise((resolve: (value?: unknown) => void) => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
        setTimeout(() => {
          treeNode.dataRef.children = [
            { title: '毛蛋', key: `${treeNode.eventKey}-0` },
            { title: '二蛋', key: `${treeNode.eventKey}-1` },
          ];
          treeData.value = [...treeData.value];
          resolve();
        }, 1000);
      });
    };
    return {
      expandedKeys,
      selectedKeys,
      treeData,
      onLoadData,
    };
  },
});
</script>