封装树形组件

效果

支持的属性：

data：树形结果的数据，例如：

const data = ref([
  {
    label: '水果',
    checked: false, // 添加初始勾选状态
    children: [
      {
        label: '苹果',
        checked: false,
        children: [
          {
            label: '红富士',
            checked: false
          },
          {
            label: '黄元帅',
            checked: false
          }
        ]
      },
    ]
  },
])

show-checkbox：是否显示复选框
transition：是否应用过渡效果
支持事件 @update:child-check，可以获取最新的状态

使用示例：

vue

<Tree
  :data="data"
  :show-checkbox="true"
  :transition="true"
  @update:child-check="handleChildCheck"
/>

笔记

关于复选框需要处理一些细节：

父节点选中/取消会控制所有的子节点选中/取消状态
子节点的选中/取消状态也会影响父节点

-EOF-

封装树形组件 ​

封装树形组件