多级选择 KLMultiSelect

基本形式

<kl-multi-select 
    source={source} 
    value={value} 
    on-select={this.selected($event)}
    placeholder={placeholder}
    />
<p>选择的是：{value}</p>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '母婴儿童', id: 1, children: [
                {name: '营养辅食', id: 11},
                {name: '奶粉', id: 12, children: [
                    {name: '爱他美', id: 121, children: [
                        {name: '1段', id: 1211, children: [
                            {name: '0-6个月', id: 12111},
                            {name: '6-12个月', id: 12112}
                            ]},
                        {name: '3段', id: 1212},
                        {name: '5段', id: 1213}
                        ]},
                    {name: '美赞臣', id: 122}
                ]},
                {name: '童装童鞋', id: 13},
                {name: '宝宝用品', id: 14},
            ]},
            {name: '美容彩妆', id: 2},
            {name: '服饰鞋包', id: 3, children: [
                {name: '女士箱包', id: 31},
                {name: '男士箱包', id: 32}
            ]}
        ],
        value: '',
        placeholder: '请选择'
    },
    selected: function(event) {
        console.log(event);
    }
});

selected, value和key

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

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

*注：selected不能用来赋初始值，selected属性的值可查看控制台

<kl-form>
    <kl-form-item cols=4>
        <kl-multi-select source={source} onlyChild={false} selected={selected} />
    </kl-form-item>
    <kl-form-item cols=4>
        <kl-multi-select source={source} onlyChild={false} value={value} />
    </kl-form-item>
    <kl-form-item cols=4>
        <kl-multi-select source={source} onlyChild={false} key="name" value="女士箱包" />
    </kl-form-item>
</kl-form>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '母婴儿童', id: 1, children: [
                {name: '营养辅食', id: 11},
                {name: '奶粉', id: 12, children: [
                    {name: '爱他美', id: 121, children: [
                        {name: '1段', id: 1211, children: [
                            {name: '0-6个月', id: 12111},
                            {name: '6-12个月', id: 12112}
                            ]},
                        {name: '3段', id: 1212},
                        {name: '5段', id: 1213}
                        ]},
                    {name: '美赞臣', id: 122}
                ]},
                {name: '童装童鞋', id: 13},
                {name: '宝宝用品', id: 14},
            ]},
            {name: '美容彩妆', id: 2},
            {name: '服饰鞋包', id: 3, children: [
                {name: '女士箱包', id: 31},
                {name: '男士箱包', id: 32}
            ]}
        ],
        value: 121
    },
    config: function() {
        this.data.selected = {};
    },
    selected: function(event) {
        console.log(this.data.selected);
    }
});

展示路径（单选）

showPath控制选择是否显示路径，若为true时selected.path 保存当前路径字符串，pathArray 是路径数组，具体看控制台。

选择显示路径的情况下，路径可以提示文本的形式显示在所选项名称上，使用placement选择路径显示的方位，默认为top，此处设置为bottom。

<kl-multi-select 
    showPath={showPath} 
    placement={placement} 
    pathString={pathString} 
    source={source} 
    value={value}
    on-select={this.selected($event)}
    />
<p>选择的是：{value}</p>
<p>路径是: {path}</p>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '母婴儿童', id: 1, children: [
                {name: '营养辅食', id: 11},
                {name: '奶粉', id: 12, children: [
                    {name: '爱他美', id: 121, children: [
                        {name: '1段', id: 1211, children: [
                            {name: '0-6个月', id: 12111},
                            {name: '6-12个月', id: 12112}
                            ]},
                        {name: '3段', id: 1212},
                        {name: '5段', id: 1213}
                        ]},
                    {name: '美赞臣', id: 122}
                ]},
                {name: '童装童鞋', id: 13},
                {name: '宝宝用品', id: 14},
            ]},
            {name: '美容彩妆', id: 2},
            {name: '服饰鞋包', id: 3, children: [
                {name: '女士箱包', id: 31},
                {name: '男士箱包', id: 32}
            ]}
        ],
        value: '',
        showPath: true,
        placement: 'bottom',
        pathString: '>'
    },
    selected: function(event) {
        console.log(event);
        this.data.path = event.selected.path;
    }
});

多选

<kl-multi-select 
    source={source} 
    multiple={multiple} 
    value={value}  
    on-select={this.selected($event)} 
    on-change={this.change($event)}
    />
选择的是：{value}

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '母婴儿童', id: 1, children: [
                {name: '营养辅食', id: 11},
                {name: '奶粉', id: 12, children: [
                    {name: '爱他美', id: 121, children: [
                        {name: '1段', id: 1211, children: [
                            {name: '0-6个月', id: 12111},
                            {name: '6-12个月', id: 12112}
                            ]},
                        {name: '3段', id: 1212},
                        {name: '5段', id: 1213}
                        ]},
                    {name: '美赞臣', id: 122}
                ]},
                {name: '童装童鞋', id: 13},
                {name: '宝宝用品', id: 14},
            ]},
            {name: '美容彩妆', id: 2},
            {name: '服饰鞋包', id: 3, children: [
                {name: '女士箱包', id: 31},
                {name: '男士箱包', id: 32}
            ]}
        ],
        value: '',
        multiple: true
    },
    selected: function(event) {
        console.log('selected',event);
    },
    change: function(event) {
        console.log('change',event);
    }
});

允许勾选非末级

onlyChild控制是否允许勾选非末级（仅支持单选场景）

选择非末级时点击文本，如果只是想展开下一级请点击右侧箭头

<kl-multi-select 
    source={source} 
    showPath={showPath} 
    value={value} 
    on-select={this.selected($event)} 
    onlyChild={onlyChild}
    />
<p>选择的是：{value}</p>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '母婴儿童', id: 1, children: [
                {name: '营养辅食', id: 11},
                {name: '奶粉', id: 12, children: [
                    {name: '爱他美', id: 121, children: [
                        {name: '1段', id: 1211, children: [
                            {name: '0-6个月', id: 12111},
                            {name: '6-12个月', id: 12112}
                            ]},
                        {name: '3段', id: 1212},
                        {name: '5段', id: 1213}
                        ]},
                    {name: '美赞臣', id: 122}
                ]},
                {name: '童装童鞋', id: 13},
                {name: '宝宝用品', id: 14},
            ]},
            {name: '美容彩妆', id: 2},
            {name: '服饰鞋包', id: 3, children: [
                {name: '女士箱包', id: 31},
                {name: '男士箱包', id: 32}
            ]}
        ],
        value: 1,
        onlyChild: false,
        showPath: true
    },
    selected: function(event) {
        console.log(event);
    }
});

展示路径（多选）

showPath控制选择是否显示路径，若为true时selected.path 保存当前路径字符串。

选择显示路径的情况下，路径可以提示文本的形式显示在所选项名称上，使用placement选择路径显示的方位，默认为top，此处设置为bottom。

showPathName 控制是否直接替代 name 来展示

<kl-multi-select 
    showPath={showPath} 
    placement={placement} 
    pathString={pathString} 
    showPathName={showPathName} 
    multiple={multiple}
    source={source} 
    value={value}
    on-select={this.selected($event)}
    />
<p>选择的是：{value}</p>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '母婴儿童', id: 1, children: [
                {name: '营养辅食', id: 11},
                {name: '奶粉', id: 12, children: [
                    {name: '爱他美', id: 121, children: [
                        {name: '1段', id: 1211, children: [
                            {name: '0-6个月', id: 12111},
                            {name: '6-12个月', id: 12112}
                            ]},
                        {name: '3段', id: 1212},
                        {name: '5段', id: 1213}
                        ]},
                    {name: '美赞臣', id: 122}
                ]},
                {name: '童装童鞋', id: 13},
                {name: '宝宝用品', id: 14},
            ]},
            {name: '美容彩妆', id: 2},
            {name: '服饰鞋包', id: 3, children: [
                {name: '女士箱包', id: 31},
                {name: '男士箱包', id: 32}
            ]}
        ],
        value: '',
        showPath: true,
        placement: 'bottom',
        showPathName: true,
        multiple: true,
        pathString: '>'
    },
    selected: function(event) {
        console.log(event);
        this.data.path = event.selected.path;
    }
});

多选模式2

如果某个根节点下的所有子节点全被勾选，则只展示根节点。

此时根节点的值为字段 rootValue，原 value 字段的值还是所有被选中的叶子节点的值

<kl-multi-select 
    source={source} 
    multiple={multiple} 
    showRoot={showRoot}
    value={value}  
    rootValue={rootValue}
    on-select={this.selected($event)} 
    on-change={this.change($event)}
    />
<p>选择的是：{value}</p>
<p>rootValue: {rootValue}</p>

var component = new NEKUI.Component({
    template: template,
    data: {
        source: [
            {name: '母婴儿童', id: 1, children: [
                {name: '营养辅食', id: 11},
                {name: '奶粉', id: 12, children: [
                    {name: '爱他美', id: 121, children: [
                        {name: '1段', id: 1211, children: [
                            {name: '0-6个月', id: 12111},
                            {name: '6-12个月', id: 12112}
                            ]},
                        {name: '3段', id: 1212},
                        {name: '5段', id: 1213}
                        ]},
                    {name: '美赞臣', id: 122}
                ]},
                {name: '童装童鞋', id: 13},
                {name: '宝宝用品', id: 14},
            ]},
            {name: '美容彩妆', id: 2},
            {name: '服饰鞋包', id: 3, children: [
                {name: '女士箱包', id: 31},
                {name: '男士箱包', id: 32}
            ]}
        ],
        value: '',
        rootValue: '1',
        multiple: true,
        showRoot: true
    },
    selected: function(event) {
        console.log('selected',event);
    },
    change: function(event) {
        console.log('change',event);
    },
    rootChange: function(event) {
        console.log('rootChange',event);
    },
});

API

KLMultiSelect

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"`	=> 数据项的name键
[options.data.childKey]	`string`	`"children"`	=> 数据子项的键
[options.data.onlyChild]	`boolean`	`true`	=> 在单选模式下，是否只允许选中末级
[options.data.value]	`string`	`null`	<=> 当前选择值
[options.data.rootValue]	`string`	`null`	<=> 模式2种的选择值(具体见文档 demo)
[options.data.showRoot]	`string`	`false`	=> 是否用模式2(具体见文档 demo)，这种模式下如果 value 和 rootValue 都传入，回显以 rootValue 为准
[options.data.selected]	`object`		<=> 当前选择项
[options.data.placeholder]	`string`	`"''"`	=> 默认提示
[options.data.separator]	`string`	`","`	=> 多选时value分隔符
[options.data.showPath]	`boolean`	`false`	=> 单选时是否展示路径
[options.data.placement]	`string`	`"top"`	=> 单选时展示路径的 tooltip 位置，只有在showPath=true的时候生效，如果填 false 则不展示 tooltip
[options.data.pathString]	`string`	`"'>'"`	=> 链接每一级路径的字符串，避免名字中包含该字符串
[options.data.showPathName]	`boolean`	`false`	=> 是否用 path 代替原来的 namekey 显示
[options.data.readonly]	`boolean`	`false`	=> 是否只读
[options.data.multiple]	`boolean`	`false`	=> 是否多选
[options.data.disabled]	`boolean`	`false`	=> 是否禁用
[options.data.visible]	`boolean`	`true`	=> 是否显示
[options.data.class]	`string`		=> 补充class
[options.data.width]	`number`		=> 组件宽度

value 改变时触发Event

Name	Type	Description
sender	`object`	事件发送对象
value	`object`	当前 value 的值

rootValue 改变时触发Event

Name	Type	Description
sender	`object`	事件发送对象
value	`object`	当前 value 的值

select 选择某一项时触发Event

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