@bdsoft/tree

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

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

更新 dragTree

isShowIcon: Boolen // 是否显示图标

功能支持

- 静态数据渲染
- 动态数据渲染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';

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"
>

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)


:isUrlLoad="false" :defaultProps="defaultProps" filterName="text" :isExpandALl="true"
:expandId="'0'" :rootData="rootData" :barHeight="0" :isContextmenu="true" :menuData="menuData">


`

`

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



`

$3

`自定义菜单图表
// 项目内的相对路径
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:
: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"
>
`

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

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

设置过滤词

`
// 适用于树节点搜索，但不希望使用当前ui时使用




const tableTreeRef = ref()
const getTableForm = () => ({
tablename: ''
})
const tableForm = ref(getTableForm())
/**
* 树节点过滤方法
*/
const filterTree = () => {
tableTreeRef.value.setFilterText(tableForm.value.tablename)
}
`

方法

1. 加载效果
// 数据加载开始
bdtreeRef.value?.showLoading(true)
// 数据加载结束
bdtreeRef.value?.showLoading(false)

2. 默认选中第一个节点并点击
`
await bdtreeRef.value?.setCurrentKey(treeData.value[0]?.id);
let node = await bdtreeRef.value.getCurrentNode()
emits('handleNodeClick', node)
``