树形 YxTree

代码演示

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