树形组件

html

<div class="demo-line">
    <feng-tree :data="treeData"></feng-tree>
</div>

javascript

const treeData = ref([
    {
        value: '1',
        text: "node-1",
        children: [
            {
                value: '1-1',
                text: "node-1-1",
                children: [
                    {
                        value: '1-1-1',
                        text: "node-1-1-1"
                    },
                    {
                        value: '1-1-2',
                        text: "node-1-1-2"
                    },
                    {
                        value: '1-1-3',
                        text: "node-1-1-3"
                    }
                ]
            },
            {
                value: '1-2',
                text: "node-1-2"
            }
        ]
    },
    {
        value: '2',
        text: "node-2",
        children: [
            {
                value: '2-1',
                text: "node-2-1"
            },
            {
                value: '2-2',
                text: "node-2-2"
            }
        ]
    },
    {
        value: '3',
        text: "node-3",
        component: h('input', { type: 'checkbox', id: 'node-3', style: {
            margin: 'auto 2px'
        } })
    },
    {
        value: '4',
        text: "",
        component: h('div', { style: { display: 'flex', alignItems: 'center', width: '100%' } },
            {
                default: () => [
                    h(
                        'input', 
                        { 
                            type: 'checkbox', 
                            id: 'node-4', 
                            style: {
                                margin: 'auto 2px',
                                cursor: 'pointer'
                            } 
                        }
                    ),
                    h('label', { for: 'node-4', style: { width: '100%', cursor: 'pointer'}}, 'node-4')
                ],
            }
        ),
    }
]);

注意

在node-4中，click事件会触发两次。因为label执行click事件时，它会传递给input再执行一次同一click事件。大部分情况下应将事件绑定到input，这里可以采用node-3的方式，并为事件添加上input的切换。

属性

属性名	说明	默认值
data	数据	[]
paddingLeft	节点左侧距离	0
paddingLeftStep	节点左侧距离步长	16

data

属性名	说明
value	节点唯一值
text	节点文本
children	子节点
component	自定义节点前样式

事件

事件名	说明
click	点击节点触发