多级选择 KLMultiSelect

基本形式

多级选择 KLMultiSelect - 图1

  1. <kl-multi-select
    source={source}
    value={value}
    on-select={this.selected($event)}
    placeholder={placeholder}
    />
    <p>选择的是:{value}</p>
  1. 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。其中selectedvalue是联动的,当一项变化时会同时改变另一项。

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

多级选择 KLMultiSelect - 图2

  1. <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>
  1. 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

多级选择 KLMultiSelect - 图3

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

多选

多级选择 KLMultiSelect - 图4

  1. <kl-multi-select
    source={source}
    multiple={multiple}
    value={value}
    on-select={this.selected($event)}
    on-change={this.change($event)}
    />
    选择的是:{value}
  1. 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控制是否允许勾选非末级(仅支持单选场景)

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

多级选择 KLMultiSelect - 图5

  1. <kl-multi-select
    source={source}
    showPath={showPath}
    value={value}
    on-select={this.selected($event)}
    onlyChild={onlyChild}
    />
    <p>选择的是:{value}</p>
  1. 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 来展示

多级选择 KLMultiSelect - 图6

  1. <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>
  1. 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 字段的值还是所有被选中的叶子节点的值

多级选择 KLMultiSelect - 图7

  1. <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>
  1. 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

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

value 改变时触发Event

NameTypeDescription
senderobject事件发送对象
valueobject当前 value 的值

rootValue 改变时触发Event

NameTypeDescription
senderobject事件发送对象
valueobject当前 value 的值

select 选择某一项时触发Event

NameTypeDescription
senderobject事件发送对象
selectedobject当前选择项