Vben Admin

Tree

对 antv 的 tree 组件进行封装

Usage

<template>
  <BasicTree :treeData="treeData" />
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicTree } from '/@/components/Tree/index';
  import { treeData } from './data';
  import { CollapseContainer } from '/@/components/Container/index';
  import { TreeItem } from '/@/components/Tree/index';

  export const treeData: TreeItem[] = [
    {
      title: 'parent 1',
      key: '0-0',
      icon: 'home|svg',
      children: [
        { title: 'leaf', key: '0-0-0' },
        {
          title: 'leaf',
          key: '0-0-1',
          children: [
            { title: 'leaf', key: '0-0-0-0' },
            { title: 'leaf', key: '0-0-0-1' },
          ],
        },
      ],
    },
    {
      title: 'parent 2',
      key: '1-1',
      icon: 'home|svg',
      children: [
        { title: 'leaf', key: '1-1-0' },
        { title: 'leaf', key: '1-1-1' },
      ],
    },
    {
      title: 'parent 3',
      key: '2-2',
      icon: 'home|svg',
      children: [
        { title: 'leaf', key: '2-2-0' },
        { title: 'leaf', key: '2-2-1' },
      ],
    },
  ];
  export default defineComponent({
    components: { BasicTree, CollapseContainer },
    setup() {
      return { treeData };
    },
  });
</script>

Props

温馨提醒

除以下参数外，官方文档内的 props 也都支持，具体可以参考 antv tree

属性类型默认值可选值说明版本
treeDataTreeItem[]--树组件数据
rightMenuListContextMenuItem[]--右键菜单列表
checkedKeysstring[]--勾选的节点
selectedKeysstring[]--选中的节点
expandedKeysstring[]--展开的节点
actionListActionItem[]--鼠标移动上去右边操作按钮列表
titlestring--定制标题字符串
toolbarboolean--是否显示工具栏
searchboolean--显示搜索框
clickRowToExpandboolean--是否在点击行时自动展开
beforeRightClick(node, event)=>ContextMenuItem[]--右键点击回调，可返回右键菜单列表数据来生成右键菜单
rightMenuListContextMenuItem[]--右键菜单列表数据
defaultExpandLevelstring ｜ number--初次渲染后默认展开的层级2.4.1
defaultExpandAllbooleanfalsetrue/false初次渲染后默认全部2.4.1
searchValue(v-model)string--当前搜索词2.7.1

注意

defaultExpandLevel、defaultExpandAll 仅在初次渲染时生效。如果basicTree是在创建完毕之后才设置的treeData(如异步数据)，需要在更新后自己调用basicTree提供的expandAll、filterByLevel来执行展开

ActionItem

{
  // 渲染的图标
  render: (record: any) => any;
  // 是否显示
  show?: boolean | ((record: Recordable) => boolean);
}

ContextMenuItem

{
  // 文本
  label: string;
  // 图标
  icon?: string;
  // 是否禁用
  disabled?: boolean;
  // 事件
  handler?: (...arg) => any;
  // 是否显示分隔线
  divider?: boolean;
  // 子级菜单数据
  children?: ContextMenuItem[];
}

Slots

温馨提醒

官方文档内的 slot 都支持，具体可以参考 antv tree

Methods

名称回调参数说明
checkAll(checkAll: boolean) => void选择所有
expandAll(expandAll: boolean) => void展开所有
setExpandedKeys(keys: Keys) => void设置展开节点
getExpandedKeys() => Keys获取展开节点
setSelectedKeys(keys: Keys) => void设置选中节点
getSelectedKeys() => Keys获取选中节点
setCheckedKeys(keys: CheckKeys) => void设置勾选节点
getCheckedKeys() => CheckKeys获取勾选节点
filterByLevel(level: number) => void显示指定等级
insertNodeByKey(opt: InsertNodeParams) => void插入子节点到指定节点内
deleteNodeByKey(key: string) => void根据 key 删除节点
updateNodeByKey(key: string, node: Omit<TreeItem, 'key'>) => void根据 key 更新节点
setSearchValue(value: string) => void设置当前搜索词（v2.7.1）
getSearchValue() => string获取当前搜索词(v2.7.1)