主项目需要安装依赖（如果主项目安装了#bdsoft/element则忽略下方配置1）：

需要对引入项目进行 main.js 的改造
import _ as Vue from 'vue'
window.Vue = Vue
import _ as ElementPlus from 'element-plus'
window.ElementPlus = ElementPlus

功能支持

• 静态数据渲染
• 动态数据渲染Url
• 拖拽树
• 右键菜单 isContextmenu menuData 参考1.1说明
• 自定义菜单图标
• 节点搜索
• 节点展开控制
• 节点点击事件 @treeNodeClick="handleNodeClick"
• 节点点击双击事件 @treeNodeDbClick="treeNodeDbClick"

组件调用注意事项: 组件外围必须有个容器 设置高度

如果不设置isExpandALl expandKeys 则默认展开第一级节点

1.1 右侧菜单说明

1. :menuData="menuData" // 支持自定义图标，参考下面示例
2. :isContextmenu="true"
3. 自定义右键菜单是通过emitter接收BdTreeRightClick事件进行处理的，可以动态改变menuData的数组

import { BdTree } from '@bdsoft/tree';

 <BdTree
      ref="bdtreeRef"
      isTreeData
      isContextmenu
      :treeDatas="treeData"
      :menuData="treeMenuData"
      @treeNodeDbClick="handleTreeNodeDbClick"
      :defaultProps="defaultProps" 
      :render-content="renderContent"
      :isUrlLoad="false"
      :draggable="false"
      :isExpandALl="true"
      :expandId="'0'"
      :barHeight="0"
      style="background: transparent"
    >
    </BdTree>
const treeMenuDatas = [
  { value: 'qa-addcategory', label: '添加分类', icon: 'add', type: '' },
  { value: 'qa-editcategory', label: '编辑', icon: 'edit', type: 'fl' },
  { value: 'qa-delcategory', label: '删除', icon: 'del', type: 'fl' },
  { value: 'qa-delcollect', label: '取消收藏', icon: 'del', type: 'title' },
]
const treeMenuData = ref([])
import { emitter as bus } from '@bdsoft/utils'
const handleBdTreeRightClick = (item) => {
  // console.log(item)
  if (item.Items && item.Items.length > 0) {
    // 处理分类
    treeMenuData.value= treeMenuData.value.filter((item) => item.type !== 'title')
  } else {
    // 处理问题
    treeMenuData.value= treeMenuData.value.filter((item) => item.type === 'fl')
  }
}
onMounted(() => {
  bus.on('BdTreeRightClick',handleBdTreeRightClick)
})
onUnmounted(() => {
  bus.off('BdTreeRightClick',handleBdTreeRightClick)
})

使用说明

import { BdTree } from '@bdsoft/tree';
// 两种静态数据模式  一个是纯treeData（isTreeData=true）一个是rootData +treeData 合并(isTreeData=false)
 <BdTree ref="bdtreeRef" isTreeData :treeDatas="treeData" :isUrlLoad="false" :isExpandALl="true" :expandId="'0'" :barHeight="0"> </BdTree>

  <BdTree ref="bdtreeRef" :bodyRef="zbConfigRef" :bdsdk="bdsdk" :treeDatas="treeData"
        :isUrlLoad="false" :defaultProps="defaultProps" filterName="text" :isExpandALl="true"
        :expandId="'0'" :rootData="rootData" :barHeight="0" :isContextmenu="true" :menuData="menuData">
    </BdTree>

import { bdsdk } from '@/api/newrabbit.js'
import { emitter } from '@bdsoft/utils'

const menuData = ref([
    { value: 'addcategory', label: '添加', icon: 'add' },
    { value: 'editcategory', label: '编辑', icon: 'edit' },
    { value: 'delcategory', label: '删除', icon: 'del' }
])

// 该事件是右键菜单定制的value 出发相应的菜单按钮
// onMounted(() => {
//      emitter.on('addcategory',handleaddcategory)
//      emitter.on('editcategory',handleaddcategory)
//      emitter.on('delcategory',handleaddcategory)
// })
// onUnmounted(() => {
//     emitter.off('addcategory',handleaddcategory)
//     emitter.off('editcategory',handleaddcategory)
//     emitter.off('delcategory',handleaddcategory)
// })
// =====================测试代码 end

<!-- 树组件 -->
<bd-tree  :treeDatas="treeDatas" :isUrlLoad="false" :bdsdk="bdsdk" :defaultProps="{
    children: 'items',
    label: 'title',
    isLeaf: 'isLeaf'
}" expandId="0" filterName="title"></bd-tree>

自定义菜单图表

// 项目内的相对路径
const getAssetsUrl = (url) => {
    return new URL(`../../../../assets/images/${url}`, import.meta.url).href
}
const img1 = getAssetsUrl('menu/add.png')
const menuData = ref([
    { value: 'addcategory', label: '添加', icon: 'add' },
    { value: 'editcategory', label: '编辑', icon: '' },
    { value: 'editcategory2', label: '扩展', icon: img1 },
    { value: 'delcategory', label: '删除', icon: 'del' }
])

isReadonly
defaultProps{ children: 'children', id: 'id', pid: 'parentid', sequence: 'sequence'}
@treeAllowDrag
@treeAllowDrop
@updateTree

增加dragTree文件，可用于多树拖拽
保留了节点搜索等功能，具体自行查看
暴露几个函数：
1. 拖拽节点开始事件   dragStartFn
2. 拖拽节点滑入事件  dragOverFn
3. 拖拽节点结束事件  dropFn
4. 拖拽节点离开事件  dragLeaveFn  // 拖拽某节点离开节点时触发事件
5. 节点聚焦事件  nodeFocusFn
6. 节点鼠标滑过事件  nodeMouseOverFn
5/6 函数搭配draggable，用于判定树节点是否允许拖拽
新增几个属性:
1. draggingOverId  当前拖拽经过节点
2. dragPosition  判定拖拽位置
3. showGuidelines  显示辅助线
eg:
<drag-tree
    :treeDatas="treeDatas"
    :expandKeys="expandKeys"
    :isExpandALl="isExpandALl"
    :isUrlLoad="false"
    :bdsdk="bdsdk"
    :defaultProps="defaultProps"
    :isTreeData="true"
    :draggable="draggAble"
    :dragPosition="dragPosition"
    :draggingOverId="draggingOverId"
    @dragStartFn="handleNodeDragStart"
    @dropFn="handlerNodeDragDrop"
    @dragOverFn="handlerNodeDragOver"
    @dragLeaveFn="handlerNodeDragLeave"
    @treeNodeClick="handleNodeClick"
    @nodeMouseOverFn="handlerNodeMouseOver"
    @nodeFocusFn="handlerNodeFocus"
    :showSearcher="false"
    :barHeight="50"
    :draggable="true"
    ref="treeRef"
></drag-tree>

新增手风琴属性
isAccordion  Boolean  默认false

在 el-dialog 中 使用时 append-to-body

设置过滤词

// 适用于树节点搜索，但不希望使用当前ui时使用
<el-input v-model="tableForm.tablename" @input="filterTree">
  <template #prepend> 
    <el-button icon="Search" />
  </template>
</el-input>
<bd-tree ref="tableTreeRef"></bd-tree>
const tableTreeRef = ref()
const getTableForm = () => ({
  tablename: ''
})
const tableForm = ref(getTableForm())
/**
 * 树节点过滤方法
 */
const filterTree = () => {
  tableTreeRef.value.setFilterText(tableForm.value.tablename)
}