8、checkbox 多选.md

## 万能表单使用方式
#### 静态数据方式
#### 应用场景：选项数据为静态数据的情况。
```js
{
  key:"checkbox1", title:"多选类型", type:"checkbox",
  itemWidth:80,
  data:[
    { value:1, label:"选项1" },
    { value:2, label:"选项2" }
  ]
}
```

#### 远程数据方式
#### 应用场景：需要从数据库中获取选项的情况。
```js
{
  key:"checkbox1", title:"多选类型", type:"checkbox",
  border:true,
  itemWidth:80,
  action:"admin/select/kh/categorys",
  props:{ list:"rows", value:"_id", label:"name" },
}
```

#### 远程数据带参数方式1
```js
{
  key:"checkbox1", title:"多选类型", type:"checkbox",
  border:true,
  itemWidth:80,
  action:"admin/select/kh/categorys",
  actionData:{
    a:1
  },
  props:{ list:"rows", value:"_id", label:"name" },
}
```
#### 远程数据带参数方式2
```js
{
  key:"checkbox1", title:"多选类型", type:"checkbox",
  border:true,
  itemWidth:80,
  action:"admin/select/kh/categorys",
  actionData:function(){
      return {
      a:that.form1.data.a
    }
  },
  props:{ list:"rows", value:"_id", label:"name" },
}
```

#### 数据预处理
```js
{
  key:"checkbox1", title:"多选类型", type:"checkbox",
  border:true,
  itemWidth:80,
  action:"admin/select/kh/categorys",
  props:{ list:"rows", value:"_id", label:"name" },
  dataPreprocess:function(list){
    list.map((item, index) => {
      item.name = `${item.name}(${item._id})`
    });
    return list;
  }
}
```


## API

### 属性

[点击查看『公共属性』](https://gitee.com/vk-uni/vk-uni-cloud-router/wikis/pages?sort_id=4051177&doc_id=975983)

### 组件属性

| 参数             | 说明                           | 类型    | 默认值  | 可选值 |
|------------------|-------------------------------|---------|--------|-------|
| data            | 静态模式数据源 | Array  | - | -  |
| action          | 动态模式 - 远程请求的云函数地址 | String  | - | -  |
| actionData          | 动态模式 - 远程请求的云函数时的额外参数 | Object、Function  | - | -  |
| props          | 数据源的属性匹配规则 | Object  | { list:'list', value:'value', label:'label' } | -  |
| dataPreprocess          | 动态模式 - 云函数返回的数据进行预处理 | function(list)  | - | -  |
| textColor      | 按钮形式的 Radio 激活时的文本颜色 | String  | #ffffff | -  |
| fill      | 按钮形式的 Radio 激活时的填充色和边框色 | String  | #409EFF | -  |
| optionType        | 选项形状类型 | String  | default | button  |
| border          | 是否显示边框 | Boolean  | false| true |
| itemWidth          | 选项的统一宽度（用于排版） | Number  | - | -  |
| onChange          | function(val, formData, column, index, option) | Function  | -| -  |

#### onChange 使用示例
```js
{
  key:"checkbox1", title:"多选类型", type:"checkbox",
  border:true,
  itemWidth:80,
  action:"admin/select/kh/categorys",
  props:{ list:"rows", value:"_id", label:"name" },
  onChange:function(val, formData, column, index, option){
    console.log(1,val, formData, column, index, option);
  }
}
```

## 万能表格使用方式

```js
{ 
  key: "checkbox", title: "多选字段", type: "checkbox", width: 120, defaultValue:1,
  data:[
    { value:1, label:"选项1" },
    { value:2, label:"选项2" }
  ]
}
```


## template 使用方式
#### 静态数据方式
#### 应用场景：选项数据为静态数据的情况。
```html
<vk-data-input-checkbox
  v-model="form1.value"
  :localdata="[
    { value:1, label:'选项1' },
    { value:2, label:'选项2' },
    { value:3, label:'选项3' }
  ]"
></vk-data-input-checkbox>
```
#### 远程数据方式
#### 应用场景：需要从数据库中获取选项的情况。
```html
<vk-data-input-checkbox
  v-model="form1.value"
  :item-width="80"
  action="admin/select/kh/categorys"
  :props="{ list:'rows', value:'_id', label:'name' }"
></vk-data-input-checkbox>
```