复选组 KLCheckGroup
基本形式
<kl-check-group source={source} value={checkedValue} />
<div>已选择的: {checkedValue}</div>
var component = new NEKUI.Component({
template: template,
data: {
source: [
{name: '一般贸易', id: 1},
{name: '海淘', id: 2},
{name: '直邮', id: 3},
{name: '保税', id: 4}
],
checkedValue: '1'
}
});
禁用组件
<kl-check-group source={source} disabled />
var component = new NEKUI.Component({
template: template,
data: {
source: [
{name: '一般贸易', id: 1},
{name: '海淘', id: 2},
{name: '直邮', id: 3},
{name: '保税', id: 4}
]
}
});
全选
<check name="全选" checked={checkedAll} on-check={this._checkAll($event)} />
<kl-check-group source={source} />
var component = new NEKUI.Component({
template: template,
data: {
source: [
{name: '一般贸易', id: 1},
{name: '海淘', id: 2},
{name: '直邮', id: 3},
{name: '保税', id: 4}
]
},
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;
})
},
});
表单项
<kl-form>
<kl-form-item title="跨境方式" tip="跨境方式">
<kl-check-group source={source} value={checkedValue}/>
</kl-form-item>
</kl-form>
var component = new NEKUI.Component({
template: template,
data: {
source: [
{name: '一般贸易', id: 1},
{name: '海淘', id: 2},
{name: '直邮', id: 3},
{name: '保税', id: 4}
],
checkedValue: '2,3'
}
});
多行
<kl-check-group source={source} value={checkedValue} block />
var component = new NEKUI.Component({
template: template,
data: {
source: [
{name: '一般贸易', id: 1},
{name: '海淘', id: 2},
{name: '直邮', id: 3},
{name: '保税', id: 4}
],
checkedValue: '1,4'
}
});
远程数据
<kl-check-group service={@(this.service)} value={checkedValue}/>
var component = new NEKUI.Component({
template: template,
service: {
getList: function(params, success) {
NEKUI.ajax.request({
url: '/data/KLCheckGroup.json',
method: 'get',
type: 'json',
data: params,
success: success
});
}
},
data: {
checkedValue: '3,4'
}
});
API
KLCheckGroup
KLCheckGroup
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 | | @=> 数据服务 |
validate 验证组件时触发Event
Name | Type | Description |
---|
sender | object | 事件发送对象 |
result | object | 验证结果 |