<template>
<div style="width: 240px">
<YxTree
ref="YxTreeRef"
@on-drop="onDrop"
@add="add"
@edit="edit"
@remove="remove"
@click="click"
></YxTree>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
const YxTreeRef = ref()
/*拖动结束*/
const onDrop = (treeNodes: any, targetNode: any, moveType: any) => {
console.log(treeNodes, targetNode, moveType)
}
/*添加*/
const add = (params: any) => {
console.log(params)
}
/*编辑*/
const edit = (params: any) => {
console.log(params)
}
/*删除*/
const remove = (params: any) => {
console.log(params)
}
/*点击*/
const click = (params: any) => {
console.log(params)
}
onMounted(() => {
/**
* open:true, 默认打开 默认false
* edit:false,禁止编辑 默认true
* del:false,禁止删除 默认true
* add:false,禁止添加子节点 默认true
* drag:false 禁止拖拽 默认true
* dropInner：false ,禁止拖入内部， 默认true
* dropRoot:false ,禁止成为跟节点 默认true
* childOuter:false,子节点禁止拖走 默认true
*/
const zNodes = [
{
id: 0,
pId: -1,
name: '固定不变的根节点',
open: true,
edit: false,
remove: false,
icon: '/icon1.png',
},
{ id: 1, pId: 0, name: '父节点1 - 展开', open: true, icon: '/icon1.png' },
{
id: 11,
pId: 1,
name: '父节点11 - 折叠',
dropRoot: false,
dropInner: false,
childOuter: false,
icon: '/icon1.png',
},
{ id: 111, pId: 11, name: '叶子节点111', dropInner: false, icon: '/icon3.png' },
{ id: 112, pId: 11, name: '叶子节点112', dropInner: false, icon: '/icon3.png' },
{ id: 113, pId: 11, name: '叶子节点113', dropInner: false, icon: '/icon2.png' },
{ id: 114, pId: 11, name: '叶子节点114', dropInner: false, icon: '/icon3.png' },
{ id: 12, pId: 1, name: '父节点12 - 折叠', icon: '/icon1.png' },
{ id: 121, pId: 12, name: '叶子节点121', icon: '/icon1.png' },
{ id: 122, pId: 12, name: '叶子节点122', icon: '/icon1.png' },
{ id: 123, pId: 12, name: '叶子节点123', icon: '/icon1.png' },
{ id: 124, pId: 12, name: '叶子节点124' },
{ id: 13, pId: 1, name: '父节点13 - 没有子节点', isParent: true, icon: '/icon1.png' },
{ id: 2, pId: 0, name: '父节点2 - 折叠' },
{ id: 21, pId: 2, name: '父节点21 - 展开', open: true, icon: '/icon1.png' },
{ id: 211, pId: 21, name: '叶子节点211' },
{ id: 212, pId: 21, name: '叶子节点212' },
{ id: 213, pId: 21, name: '叶子节点213' },
{ id: 214, pId: 21, name: '叶子节点214' },
{ id: 22, pId: 2, name: '父节点22 - 折叠', icon: '/icon1.png' },
{ id: 221, pId: 22, name: '叶子节点221' },
{ id: 222, pId: 22, name: '叶子节点222' },
{ id: 223, pId: 22, name: '叶子节点223' },
{ id: 224, pId: 22, name: '叶子节点224' },
{ id: 23, pId: 2, name: '父节点23 - 折叠', icon: '/icon1.png' },
{ id: 231, pId: 23, name: '叶子节点231' },
{ id: 232, pId: 23, name: '叶子节点232' },
{ id: 233, pId: 23, name: '叶子节点233' },
{ id: 234, pId: 23, name: '叶子节点234' },
{ id: 3, pId: 0, name: '父节点3 - 没有子节点', isParent: true },
]
YxTreeRef.value.init(zNodes, { drag: true, add: true, edit: true, remove: true })
setTimeout(() => {
YxTreeRef.value.select('0')
}, 1000)
})
</script>
<style scoped lang="less"></style>
