树形控件

<template>
  <a-tree
    defaultExpandAll
    v-model:checkedKeys="checkedKeys"
    checkable
    :tree-data="treeData"
  >
    <template #title="{ title, key }">
      <span>标题是：{{ title }} 编码是： {{ key }}</span>
    </template>
  </a-tree>
  <a-button type="primary" @click="clickButton">Primary Button</a-button>
</template>
<script lang="ts">
import type { TreeProps } from "ant-design-vue";
import { defineComponent, ref, watch } from "vue";

const treeData: TreeProps["treeData"] = [
  {
    title: "parent 1",
    key: "0-0",
    children: [
      {
        title: "parent 1-0",
        key: "0-0-0",
      },
      {
        title: "parent 1-1",
        key: "0-0-1",
      },
    ],
  },
  {
    title: "parent 2",
    key: "2-0",
    children: [
      {
        title: "parent 2-0",
        key: "2-0-0",
      },
      {
        title: "parent 2-1",
        key: "2-0-1",
      },
    ],
  },
];

export default defineComponent({
  setup() {
    const checkedKeys = ref<string[]>([]);
    watch(checkedKeys, () => {
      console.log("checkedKeys", checkedKeys);
    });

    const clickButton = () => {
      console.log("checkedKeys", checkedKeys);
    };

    return {
      treeData,
      checkedKeys,
      clickButton,
    };
  },
});
</script>

纯树形控件，展开版，工作用到