代码演示

基本形式

多级选择 multi.select - 图1

  1. <multi.select source={source} value={value} on-select={this.selected($event)} />
    选择的是：{value}
  1. var component = new NEKUI.Component({
        template: template,
        data: {
            source: [
                {name: '节点1', id: 1, children: [
                    {name: '节点1.1', id: 11},
                    {name: '节点1.2', id: 12, children: [
                        {name: '节点1.2.1', id: 121, children: [
                            {name: '节点1.2.1.1', id: 1211, children: [
                                {name: '节点1.2.1.1.1', id: 12111},
                                {name: '节点1.2.1.1.2', id: 12112}
                                ]},
                            {name: '节点1.2.1.3', id: 1212},
                            {name: '节点1.2.1.3', id: 1213}
                            ]},
                        {name: '节点1.2.2', id: 122}
                    ]},
                    {name: '节点1.3', id: 13},
                    {name: '节点1.4', id: 14},
                ]},
                {name: '节点2', id: 2},
                {name: '节点3', id: 3, children: [
                    {name: '节点3.1', id: 31},
                    {name: '节点3.2', id: 32}
                ]}
            ],
            value: ''
        },
        selected: function(event) {
            console.log(event);
        }
    });

多选

多级选择 multi.select - 图2

  1. <multi.select source={source} multiple={multiple} value={value}  on-select={this.selected($event)} />
    选择的是：{value}
  1. var component = new NEKUI.Component({
        template: template,
        data: {
            source: [
                {name: '节点1', id: 1, children: [
                    {name: '节点1.1', id: 11},
                    {name: '节点1.2', id: 12, children: [
                        {name: '节点1.2.1', id: 121, children: [
                            {name: '节点1.2.1.1', id: 1211, children: [
                                {name: '节点1.2.1.1.1', id: 12111},
                                {name: '节点1.2.1.1.2', id: 12112}
                                ]},
                            {name: '节点1.2.1.3', id: 1212},
                            {name: '节点1.2.1.3', id: 1213}
                            ]},
                        {name: '节点1.2.2', id: 122}
                    ]},
                    {name: '节点1.3', id: 13},
                    {name: '节点1.4', id: 14},
                ]},
                {name: '节点2', id: 2},
                {name: '节点3', id: 3, children: [
                    {name: '节点3.1', id: 31},
                    {name: '节点3.2', id: 32}
                ]}
            ],
            value: '',
            multiple: true
        },
        selected: function(event) {
            console.log(event);
        }
    });

API

Classes

Events

TreeSelect

Kind: global classExtend: Select

new TreeSelect()

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.value]stringnull<=> 当前选择值
[options.data.selected]object<=> 当前选择项
[options.data.separator]string","=> 多选时value分隔符
[options.data.readonly]booleanfalse=> 是否只读
[options.data.multiple]booleanfalse=> 是否多选
[options.data.disabled]booleanfalse=> 是否禁用
[options.data.visible]booleantrue=> 是否显示
[options.data.class]string=> 补充class

“select 选择某一项时触发”

Kind: event emittedProperties

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