树型视图 KLTreeView

基本形式

<kl-tree-view source={source} value={value}/>
<p>选择的是：{value}</p>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '家居个护', children: [
                {name: '洗护日用'},
                {name: '居家用品', children: [
                    {name: '杯子'},
                    {name: '锅具刀具'}
                ]},
                {name: '家装家纺'},
                {name: '其他个护'},
            ]},
            {name: '母婴儿童'},
            {name: '美容彩妆', children: [
                {name: '护肤'},
                {name: '彩妆'}
            ]}
        ]
    }
});

分隔线

<kl-tree-view source={source} value={value} />
<p>选择的是：{value}</p>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '家居个护', checked: true, children: [
                {name: '洗护日用'},
                {name: '居家用品', disabled: true, children: [
                    {name: '杯子'},
                    {name: '锅具刀具'}
                ]},
                {divider: true},
                {name: '家装家纺', disabled: true},
                {name: '其他个护'},
            ]},
            {name: '母婴儿童', disabled: true},
            {divider: true},
            {name: '美容彩妆', children: [
                {name: '护肤'},
                {name: '彩妆'}
            ]}
        ]
    }
});

selected, value和key

selected表示当前选择项，value表示当前选择值。key表示数据项的键，默认为'id'。

它们三者的关系如下：selected[key] == value。其中selected和value是联动的，当一项变化时会同时改变另一项。

*注意：暂时不支持value赋初始值。

<kl-form>
    <kl-col span=6>
        <kl-tree-view  source={source} nameKey='value' selected={selected} />
    </kl-col>
    <kl-col span=6>
        <kl-tree-view  source={source} nameKey='value' value={value} />
    </kl-col>
</kl-form>
<p>选择的分别是是: {selected.value} {value}</p>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {id: 1, value: '母婴儿童'},
            {id: 2, value: '美容彩妆'},
            {id: 3, value: '服饰鞋包'}
        ]
    },
    config: function() {
        this.data.selected = this.data.source[0];
    }
});

禁用某一项，禁用组件

<kl-row>
    <kl-col span=6>
        <kl-tree-view source={source} value={value} />
    </kl-col>
    <kl-col span=6>
        <kl-tree-view source={source} disabled />
    </kl-col>
</kl-row>
<p>选择的是：{value}</p>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [{   
            name: '家居个护', 
            id: 1,
            children: [{
                name: '洗护日用',
                id: 11
            },{
                name: '居家用品',
                id:12,
                disabled: true,
                children: [
                {name: '杯子', id: 121},
                {name: '锅具刀具', id: 122}
            ]},{
                name: '家装家纺', 
                id: 13,
                disabled: true
            },{
                name: '其他个护',
                id: 14
            }]
        },{
            name: '母婴儿童', 
            id: 2,
            disabled: true
        },{
            name: '美容彩妆', 
            id: 3,
            children: [
                {name: '护肤', id: 31},
                {name: '彩妆', id: 32}
            ]
        }]
    }
});

API

TreeView

TreeView

select 选择某一项时触发Event

toggle 展开或收起某一项时触发Event