FormCreate

Appearance

Tree 树形组件 ​

规则 ​

基础示例 ​

js
const rule = {
    type:"tree",
    title:"权限",
    field:"rule",
    value:[],
    props:{
        data:[],
        props: {
            label: "title"
        }
    }
}

Props 配置示例 ​

可勾选树 ​

js
const rule = {
    type:"tree",
    title:"权限选择",
    field:"permissions",
    value:[],
    props:{
        data: [
            {
                key: 1,
                label: '用户管理',
                children: [
                    { key: 11, label: '查看用户' },
                    { key: 12, label: '编辑用户' },
                ]
            },
            {
                key: 2,
                label: '系统设置',
                children: [
                    { key: 21, label: '基础设置' },
                    { key: 22, label: '高级设置' },
                ]
            }
        ],
        checkable: true,
        cascade: true,
        checkStrategy: 'all',
    }
}

可选中树 ​

js
const rule = {
    type:"tree",
    title:"菜单选择",
    field:"menu",
    value:[],
    props:{
        data: [
            {
                key: 1,
                label: '首页',
            },
            {
                key: 2,
                label: '系统管理',
                children: [
                    { key: 21, label: '用户管理' },
                    { key: 22, label: '角色管理' },
                ]
            }
        ],
        selectable: true,
        multiple: true,
    }
}

默认展开全部 ​

js
const rule = {
    type:"tree",
    title:"权限选择",
    field:"permissions",
    value:[],
    props:{
        data: [
            {
                key: 1,
                label: '用户管理',
                children: [
                    { key: 11, label: '查看用户' },
                ]
            }
        ],
        checkable: true,
        cascade: true,
        defaultExpandAll: true,
    }
}

异步加载 ​

js
const rule = {
    type:"tree",
    title:"权限选择",
    field:"permissions",
    value:[],
    props:{
        data: [
            {
                key: 1,
                label: '用户管理',
                isLeaf: false,
            }
        ],
        checkable: true,
        remote: true,
    },
    inject: true,
    on: {
        load: ($inject, node) => {
            // 异步加载子节点数据
            return new Promise((resolve) => {
                loadTreeData(node.key).then(res => {
                    node.children = res.data.map(item => ({
                        key: item.id,
                        label: item.name,
                        isLeaf: !item.hasChildren
                    }));
                    resolve();
                });
            });
        },
    },
}

Events 事件示例 ​

监听勾选和选中变化 ​

js
const rule = {
    type:"tree",
    title:"权限选择",
    field:"permissions",
    value:[],
    props:{
        data: [
            {
                key: 1,
                label: '用户管理',
                children: [
                    { key: 11, label: '查看用户' },
                ]
            }
        ],
        checkable: true,
        cascade: true,
    },
    on: {
        'update:checked-keys': (keys, options) => {
            console.log('勾选节点改变:', keys, options);
        },
        'update:selected-keys': (keys, options) => {
            console.log('选中节点改变:', keys, options);
        },
        'update:expanded-keys': (keys, options) => {
            console.log('展开节点改变:', keys, options);
        },
    },
}

勾选后统计权限数量 ​

js
const rule = [
    {
        type:"tree",
        title:"权限选择",
        field:"permissions",
        value:[],
        props:{
            data: [
                {
                    key: 1,
                    label: '用户管理',
                    children: [
                        { key: 11, label: '查看用户' },
                        { key: 12, label: '编辑用户' },
                    ]
                }
            ],
            checkable: true,
            cascade: true,
        },
        inject: true,
        on: {
            'update:checked-keys': ($inject, keys) => {
                // 统计已选权限数量
                $inject.api.setValue('permissionCount', keys.length);
            },
        },
    },
    {
        type:"input",
        field:"permissionCount",
        title:"已选权限数",
        props: {
            disabled: true,
        },
    },
]

完整配置项:naive-ui_Tree

value :Array

Props ​

名称类型默认值说明版本
allow-drop(info: { dropPosition: DropPosition, node: TreeOption, phase: 'drag' | 'drop' }) => boolean一个不允许 drop 在叶节点内部的函数是否允许 drop
block-linebooleanfalse节点整行撑开
block-nodebooleanfalse节点名称整行撑开
cancelablebooleantrue选中之后是否允许取消
cascadebooleanfalse是否关联选项
check-strategystring'all'设置勾选策略来指定勾选回调返回的值，all 表示回调函数值为全部选中节点；parent 表示回调函数值为父节点（当父节点下所有子节点都选中时）；child 表示回调函数值为子节点
checkablebooleanfalse是否显示选择框，需要将 cascade 设置为 true
children-fieldstring'children'替代 TreeOption 中的 children 字段名
checked-keysArray<string | number>undefined如果设定则 checked 状态受控
dataArray<TreeOption>[]树的节点数据。重新设置 data 会将一些非受控状态清空，如果你需要在使用中改动 data，最好以受控的方式控制树
default-checked-keysArray<string | number>[]默认选中的多选项
default-expand-allbooleanfalse展开全部选项
default-expanded-keysArray<string | number>[]默认展开项
default-selected-keysArray<string | number>[]默认选中的节点
draggablebooleanfalse是否可拖拽
expand-on-dragenterbooleantrue是否在拖入后展开节点
expanded-keysArray<string | number>undefined如果设定则展开受控
filter(pattern: string, node: TreeOption) => boolean一个简单的字符串过滤算法基于 pattern 指定过滤节点的函数
indeterminate-keysArray<string | number>undefined部分选中选项的 key
key-fieldstring'key'替代 TreeOption 中的 key 字段名
label-fieldstring'label'替代 TreeOption 中的 label 字段名
leaf-onlybooleanfalse是否开启仅末层树节点可选
node-props(info: { option: TreeOption }) => HTMLAttributesundefined节点的 HTML 属性2.25.0
multiplebooleanfalse是否允许节点多选
on-load(node: TreeOption) => Promise<void>undefined异步加载数据的回调函数
patternstring''默认搜索的内容
remotebooleanfalse是否异步获取选项，和 onLoad 配合
render-label(info: {option: TreeOption, checked: boolean, selected: boolean}) => VNodeChildundefined节点内容的渲染函数
render-prefix(info: {option: TreeOption, checked: boolean, selected: boolean}) => VNodeChildundefined节点前缀的渲染函数
render-suffix(info: {option: TreeOption, checked: boolean, selected: boolean}) => VNodeChildundefined节点后缀的渲染函数
render-switcher-icon() => VNodeChildundefined节点展开开关的渲染函数2.24.0
selectablebooleantrue节点是否可以被选中
selected-keysArray<string | number>undefined如果设定则 selected 状态受控
virtual-scrollbooleanfalse是否启用虚拟滚动，启用前你需要设定好树的高度样式
watch-propsArray<'defaultCheckedKeys' | 'defaultSelectedKeys' |'defaultExpandedKeys'>undefined需要检测变更的默认属性，检测后组件状态会更新。注意：watch-props 本身不是响应式的
on-dragend(data: { node: TreeOption, event: DragEvent }) => voidundefined节点完成拖拽动作后的回调函数
on-dragenter(data: { node: TreeOption, event: DragEvent }) => voidundefined节点拖拽中的回调函数
on-dragleave(data: { node: TreeOption, event: DragEvent }) => voidundefined拖拽一个节点，该节点离开其它节点后的回调函数
on-dragstart(data: { node: TreeOption, event: DragEvent }) => voidundefined开始拖拽某一个节点的回调函数
on-drop(data: { node: TreeOption, dragNode: TreeOption, dropPosition: 'before' | 'inside' | 'after', event: DragEvent }) => voidundefined节点完成拖拽动作后的回调函数
on-update:checked-keys(keys: Array<string | number>, option: Array<TreeOption | null>)) => voidundefined节点勾选项发生变化时的回调函数
on-update:indeterminate-keys(keys: Array<string | number>, option: Array<TreeOption | null>)) => voidundefined节点部分勾选项发生变化时的回调函数
on-update:expanded-keys(keys: Array<string | number>, option: Array<TreeOption | null>)) => voidundefined节点展开项发生变化时的回调函数
on-update:selected-keys(keys: Array<string | number>, option: Array<TreeOption | null>)) => voidundefined节点选中项发生变化时的回调函数

TreeOption Properties ​

名称类型说明
keystring | number节点的 key，需要唯一，可使用 key-field 修改字段名
labelstring节点的内容，可使用 label-field 修改字段名
checkboxDisabled?boolean是否禁用节点的 checkbox
children?TreeOption[]节点的子节点
disabled?boolean是否禁用节点
isLeaf?boolean节点是否是叶节点，在 remote 模式下是必须的
prefix?string | (() => VNodeChild)节点的前缀
suffix?string | (() => VNodeChild)节点的后缀

FormCreate 是一个开源项目，基于 MIT 许可证发布，欢迎个人和企业用户免费使用

MIT Licensed | Copyright © 2018-present FormCreate
陕ICP备2024036423号-1