多级选择 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);
    }
});

允许勾选非末级

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);
    }
});

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);
    }
});

展示路径（多选）

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

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 当前选择项
输入框 单选组
想让文档更完善？ 来 GitHub 提个 PR 吧！