多级选择 KLMultiSelect
基本形式
<kl-multi-selectsource={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-selectshowPath={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-selectsource={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-selectsource={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-selectshowPath={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-selectsource={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 | 当前选择项 |