前端开发框架
当前页

结构树BasicTree ​

效果 ​

tree.png

属性说明 ​

属性类型默认值说明
treeTitlestring机构列表结构树的标题
dataTreeItem[][]结构树数据
expandedKeysstring[][]展开的节点数组
checkedKeysstring[][]选中的节点数组
nodeKeystringid结构树的主键
  • TreeItem
ts
// 以下为结构树展示所必须的字段，其他字段自行定义
export interface TreeItem {
  id?: string;  // 节点id
  label: string; // 节点名称
  parentId?: string; // 父节点id
  children?: TreeItem[]; 
  type?: string; // 资源类型
}

注意

BasicTree上使用的属性都可以透传，因此el-tree的属性理论上来说都可以可以直接在BasicTree上使用

事件 ​

  • @nodeClick 点击节点的事件 参数选中节点的数据

调用组件BasicTree组件方法(具体写法参照下方使用示例) ​

  • treeRef.value?.addTopNode(node); 添加顶级节点
  • treeRef.value?.addLevelNode(node, node.parentId); 添加子节点
  • treeRef.value?.setCurrentKey(key); 设置当前选中的key: string
  • treeRef.value?.removeNode(node); 移除节点
  • treeRef.value?.setCheckedKeys(keys); 设置选中的节点列表keys: string[]
  • treeRef.value?.getHalfCheckedKeys(); 获取 半选节点
  • treeRef.value?.getCheckedNodes(); 获取 选中节点

搜索框 ​

搜索框为本地搜索

使用示例，slot使用示例 ​

vue
<template>
  <basic-tree v-bind="$attrs" ref="treeRef" :data="data" :tree-title="treeTitle">
    <template #default="{ data: scopeData }">
      <span>{{ scopeData.label }}</span>
      <span class="text-gray-300 pl-2">{{
          ['tenent', 'project'].includes(scopeData.menuType) ? '' : '- 系统'
        }}</span>
    </template>
  </basic-tree>
</template>
<script setup lang="ts">
  import { PropType, ref, unref } from 'vue';
  import { BasicTree } from '/@/components/sys/BasicTree';
  const treeRef = ref<InstanceType<typeof BasicTree>>();
  treeRef.value?.addTopNode(node);
</script>