代码演示
基本形式
<check.group source={source} />
var component = new NEKUI.Component({template: template,data: {source: [{name: '选项1', id: 1},{name: '选项2', id: 2},{name: '选项3', id: 3},{name: '选项4', id: 4},{name: '选项5', id: 5},{name: '选项6', id: 6}]}});
表单项
在表单中使用
<ui.form><form.item cols="12" title="用户名" hint="用户名的用途"><check.group source={source} /></form.item></ui.form>
var component = new NEKUI.Component({template: template,data: {source: [{name: '选项1', id: 1},{name: '选项2', id: 2},{name: '选项3', id: 3},{name: '选项4', id: 4},{name: '选项5', id: 5},{name: '选项6', id: 6}]}});
禁用组件
<check.group source={source} disabled />
var component = new NEKUI.Component({template: template,data: {source: [{name: '选项1', id: 1},{name: '选项2', id: 2},{name: '选项3', id: 3},{name: '选项4', id: 4},{name: '选项5', id: 5},{name: '选项6', id: 6}]}});
多行
<check.group source={source} block />
var component = new NEKUI.Component({template: template,data: {source: [{name: '选项1', id: 1},{name: '选项2', id: 2},{name: '选项3', id: 3},{name: '选项4', id: 4},{name: '选项5', id: 5},{name: '选项6', id: 6}]}});
远程数据
<check.group service={@(this.service)} />
var component = new NEKUI.Component({template: template,service: {getList: function(params, success) {NEKUI.ajax.request({url: '../data/list.json',method: 'get',type: 'json',data: params,success: success});}}});
全选
<check name="全选" checked={checkedAll} on-check={this._checkAll($event)} /><check.group source={source} />
var component = new NEKUI.Component({template: template,data: {source: [{name: '选项1', id: 1},{name: '选项2', id: 2},{name: '选项3', id: 3},{name: '选项4', id: 4},{name: '选项5', id: 5},{name: '选项6', id: 6}]},computed: {checkedAll: function() {var source = this.data.source;return source.filter(function(item) {return item.checked;}).length === source.length;}},_checkAll: function(event) {this.data.source.forEach(function(d) {d.checked = !!event.checked;})},});
API
Classes
Functions
- config()
- max验证组件的值是否正确() ⇒
object
CheckGroup
Kind: global classExtend: CheckGroup
new CheckGroup()
Param | Type | Default | Description |
---|---|---|---|
[options.data] | object | = 绑定属性 | |
[options.data.source] | Array.<object> | [] | <=> 数据源 |
[options.data.value] | string | "''" | <=> 选择的值,separator间隔的id值 |
[options.data.source[].name] | string | "[]" | => 每项的内容 |
[options.data.key] | string | "id" | => 数据项的键 |
[options.data.separator] | string | "','" | => value的分割符号 |
[options.data.nameKey] | string | "name" | => 数据项的name键 |
[options.data.min] | number | => 最少选几项 | |
[options.data.max] | number | => 最多选几项 | |
[options.data.required] | boolean | => 是否必选 | |
[options.data.message] | string | => 校验错误提示信息 | |
[options.data.hideTip] | boolean | false | => 是否显示校验错误信息 |
[options.data.block] | boolean | false | => 多行显示 |
[options.data.readonly] | boolean | false | => 是否只读 |
[options.data.disabled] | boolean | false | => 是否禁用 |
[options.data.visible] | boolean | true | => 是否显示 |
[options.data.class] | string | => 补充class | |
[options.service] | object | @=> 数据服务 |
config()
Kind: global functionAccess: protected