npm package: @liuyunxi/tree
Description: 树形 vue3+ts
Author: liuqiang[916000612@qq.com]
Latest version: 1.1.0



# 树形 YxTree



# 代码演示
```vue
<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>

```


# API

## 树形 YxTree

## 事件
| 事件名称    | 说明  | 回调参数                                                     |
|---------|-----|----------------------------------------------------------|
| on-drop | 拖动  | function(treeNodes: any, targetNode: any, moveType: any) |
| add     | 添加  | function(treeNode)                                       |
| edit    | 编辑  | function(treeNode)                                       |
| remove  | 删除  | function(treeNode)                                       |
| click   | 点击  | function(treeNode)                                       |

## 方法
| 事件名称 | 说明  | 回调参数                                                                  |
|------|-----|-----------------------------------------------------------------------|
| init | 初始化 | function(zNodes, { drag: true, add: true, edit: true, remove: true }) |

## 方法参数说明
| 参数     | 说明     |        类型         | 默认值   |
|--------|--------|:-----------------:|-------|
| zNodes | 简单数据   | {id:,pId,name...} |       |
| drag   | 是否允许拖动 |      boolean      | false |
| add    | 是否开启添加 |      boolean      | true  |
| edit   | 是否开启编辑 |      boolean      | true  |
| remove | 是否开启删除 |      boolean      | true  |