MultipleCheckBox
This project was generated with Angular CLI version 8.1.0.
// 这是一个angular组件,多选框,可用于导出字段..配置等...
npm i/install multiple-check-box
yarn add multiple-check-box
"dependencies" :{"multiple-check-box": <package-version>}
引用模块
import { MultipleCheckBoxModule } from 'multiple-check-box'
@NgModule({
imports: [
MultipleCheckBoxModule,
]
})
示例
angular.html
<multiple-check-box [checkData]="collection" [(ngModel)]="value" [exreaTitle]="title" [leftSideTitle]="leftSideTitle"></multiple-check-box>
title = '选择仓库';
leftSideTitle = '导出字段';
collection = [
{
id: 1,
title: '商品信息',
options: [
{ label: '开发平台', value: 'developPlatformDesc'},
]
},
{
id: 2,
title: '人员信息',
options: [
{ label: '销售经理', value: 'bgSalesManager'},
]
},
{
id: 3,
title: '库存/备货',
options: [
{ label: '可用库存', value: 'AvailableQty'},
],
exreaOptions: [
{ label: '中仓', value: 'cnStorage', checked: true},
],
},
{
id: 4,
title: '价格/毛利率',
options: [
{ label: '销售价', value: 'SalesPrice'},
],
exreaOptions: [
{ label: '中仓', value: 'cnStorage', checked: true},
]
},
{
id: 5,
title: '销量',
options: [
{ label: '最近1天销量', value: 'SalesQtyD1'},
],
exreaOptions: [
{ label: '中仓', value: 'cnStore', checked: true},
],
}
];
value = [{label: '开发平台', value: 'developPlatformDesc' pid: 1}];
API
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
[checkData] |
check的数据 | {id,title,options,exreaOptions}[] |
[] |
[(ngModel)] |
被选中项的对象数据 | {label: string, value: string, checked: boolean, id: number}[] |
[] |
[exreaTitle] |
额外选项标题 | string |
'请选择仓库' |
[leftSideTitle] |
左侧栏的标题 | string |
'导出字段' |
tips:
1.如果需要传入额外选项则`exreaOptions`一定要加上;
2.`exreaOptions`的checked需要设置为true
3.pid字段对应`collection`id项
4.暂时拥有`exreaOptions`的不可正常运行双向绑定
如
value = [{ label: '最近1天销量', value: 'SalesQtyD1', pid: 5}]
运行项目
ng serve 运行或者 yarn run start 运行你的angular项目