效果图

话不多说 直接码代码

 <a-tree
            checkable
            :tree-data="list"
            :expanded-keys="expandedKeys"
            :checkedKeys="checkedKeys"
            :selected-keys="selectedKeys"
            defaultExpandAll
            @select="onSelect"
            @check="onCheck"
          />

// 人家组件给的结构是这样子的，组件的结构
const treeData = [
  {
    title: '0-0',
    key: '0-0',
    children: [
      {
        title: '0-0-0',
        key: '0-0-0',
        children: [
          { title: '0-0-0-0', key: '0-0-0-0' },
          { title: '0-0-0-1', key: '0-0-0-1' },
          { title: '0-0-0-2', key: '0-0-0-2' },
        ],
      },
      {
        title: '0-0-1',
        key: '0-0-1',
        children: [
          { title: '0-0-1-0', key: '0-0-1-0' },
          { title: '0-0-1-1', key: '0-0-1-1' },
          { title: '0-0-1-2', key: '0-0-1-2' },
        ],
      },
      {
        title: '0-0-2',
        key: '0-0-2',
      },
    ],
  },
  {
    title: '0-1',
    key: '0-1',
    children: [
      { title: '0-1-0-0', key: '0-1-0-0' },
      { title: '0-1-0-1', key: '0-1-0-1' },
      { title: '0-1-0-2', key: '0-1-0-2' },
    ],
  },
  {
    title: '0-2',
    key: '0-2',
  },
];
// 当你从后端拿到数据的时候，你需要组装数据，如果后端给你的数据是这个结构那就不需要了，不是的话你就得自己组装数据

```javascript

    this.menuIdList.forEach((ele) => {
        this.childLists = [];
        ele.childList.forEach((ele) => {
          this.childLists.push({
            title: ele.name,
            key: ele.id,
          });
        });
        this.list.push({
          checkable: true,
          title: ele.name,
          key: ele.id,
          children: this.childLists,
        });
      });