树型视图 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} multiple />
<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-row type="flex">
    <kl-col span=6>
        <kl-tree-view source={source} value={value} />
    </kl-col>
    <kl-col span=6>
        <kl-tree-view source={source} value={value} multiple />
    </kl-col>
</kl-row>

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

selected, value和key

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

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

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

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

禁用某一项

<kl-row>
    <kl-col span=6>
        <kl-tree-view source={source} value={value} />
    </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}
            ]
        }]
    }
});

自定义模板内容

<kl-tree-view source={source} value={value} multiple>
    <kl-icon type="edit" on-click={this.edit($event)} />
</kl-tree-view>
<p>edit的值是：{edit}</p>

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

API

KLTreeView

Param	Type	Default	Description
[options.data]	`object`		= 绑定属性
[options.data.source]	`Array.<object>`	`[]`	<=> 数据源
[options.data.source[].name]	`string`		=> 每项的内容
[options.data.key]	`string`	`"id"`	=> 数据项的键
[options.data.nameKey]	`string`	`"name"`	=> 数据项的显示值
[options.data.childKey]	`string`	`"children"`	=> 数据子项的键
[options.data.source[].open]	`boolean`	`false`	=> 此项为展开/收起状态
[options.data.source[].checked]	`boolean`	`false`	=> 选中此项
[options.data.source[].disabled]	`boolean`	`false`	=> 禁用此项
[options.data.value]	`string`	`null`	<=> 当前选择值
[options.data.separator]	`string`	`","`	=> 多选时value分隔符
[options.data.multiple]	`boolean`	`false`	=> 是否多选
[options.data.readonly]	`boolean`	`false`	=> 是否只读
[options.data.disabled]	`boolean`	`false`	=> 是否禁用
[options.data.visible]	`boolean`	`true`	=> 是否显示
[options.data.class]	`string`		=> 补充class

select 选择某一项时触发Event

Name	Type	Description
sender	`object`	事件发送对象
selected	`object`	当前选择项

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

Name	Type	Description
sender	`object`	事件发送对象
item	`object`	处理项
open	`boolean`	展开/收起状态