# 8、checkbox 多选
# 万能表单使用方式
# 静态数据方式1
应用场景：选项数据为静态数据的情况。
{
key: "checkbox1", title: "多选类型", type: "checkbox",
itemWidth: 80,
data: [
{ value: 1, label: "选项一" },
{ value: 2, label: "选项二" }
]
},
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 静态数据方式2
应用场景：选项数据需要通过函数计算
{
key: "checkbox1", title: "多选类型", type: "checkbox",
itemWidth: 80,
data: () => {
let list = that.list;
return list;
}
},
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 远程数据方式
应用场景：需要从数据库中获取选项的情况。
{
key: "checkbox1", title: "多选类型", type: "checkbox",
border: true,
itemWidth: 80,
action: "admin/system/user/sys/getList",
props: { list: "rows", value: "_id", label: "nickname" },
},
1
2
3
4
5
6
7
2
3
4
5
6
7
# 远程数据带参数方式1
{
key: "checkbox1", title: "多选类型", type: "checkbox",
border: true,
itemWidth: 80,
action: "admin/system/user/sys/getList",
actionData: {
a: 1
},
props: { list: "rows", value: "_id", label: "nickname" },
},
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 远程数据带参数方式2
{
key: "checkbox1", title: "多选类型", type: "checkbox",
border: true,
itemWidth: 80,
action: "admin/system/user/sys/getList",
actionData: () => {
return {
a: that.form1.data.a
}
},
props: { list: "rows", value: "_id", label: "nickname" },
},
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 数据预处理
{
key: "checkbox1", title: "多选类型", type: "checkbox",
border: true,
itemWidth: 80,
action: "admin/system/user/sys/getList",
props: { list: "rows", value: "_id", label: "nickname" },
dataPreprocess: (list) => {
list.map((item, index) => {
item.name = `${item.nickname}(${item._id})`
});
return list;
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# API
# 公共属性
# 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| data | 静态模式数据源 | Array、Function | - | - |
| action | 支持： 1、vk框架下的云函数地址 2、http请求地址 3、自定义function请求模式 | String、Function | 无 | - |
| 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 | - | - |
| isRequest | 是否是http请求模式 | Boolean | false | true |
| requestHeader | http请求头 | Object | - | - |
| requestMethod | http请求method | String | - | - |
| onChange | function(val, formData, column, index, option) | Function | - | - |
# onChange 使用示例
{
key: "checkbox1", title: "多选类型", type: "checkbox",
border: true,
itemWidth: 80,
action: "admin/system/user/sys/getList",
props: { list: "rows", value: "_id", label: "nickname" },
onChange: (val, formData, column, index, option) => {
console.log(1, val, formData, column, index, option);
}
},
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
推荐使用 watch 代替 onChange 传送门 - watch (opens new window)
# 自定义function请求模式
vk-unicloud-admin-ui 的npm依赖版本需 >= 1.17.17
此方式同样支持http，且更自由化，比如可以在发起请求前处理请求参数，在请求成功后，处理返回参数等等。
优势：更自由化、基本可以满足所有需求场景
劣势：代码量较多
# 自定义function-http请求模式示例
{
key: "role", title: "选择角色", type: "checkbox",
border: true,
itemWidth: 80,
action: (obj={})=>{
let {
data, // 请求数据
success, // 成功回调
fail, // 失败回调
complete, // 成功回调
} = obj;
// 发起http请求
vk.request({
url: `https://www.xxx.com/api/list`,
method: "POST",
header: {
"content-type": "application/json; charset=utf-8",
},
data: data,
success: (res) => {
if (typeof success === "function") {
let list = res.rows.map((item, index) => {
return {
value: item.role_id,
label: item.role_name
}
});
success({
list: list
});
}
},
fail: (res) => {
if (typeof fail === "function") fail(res);
},
complete: (res) => {
if (typeof complete === "function") complete(res);
}
});
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# 自定义function-云函数请求模式示例
{
key: "role", title: "选择角色", type: "checkbox",
border: true,
itemWidth: 80,
action: (obj={})=>{
let {
data, // 请求数据
success, // 成功回调
fail, // 失败回调
complete, // 成功回调
} = obj;
// 发起http请求
vk.callFunction({
url: `admin/system/role/sys/getList`,
data: data,
success: (res) => {
if (typeof success === "function") {
let list = res.rows.map((item, index) => {
return {
value: item.role_id,
label: item.role_name
}
});
success({
list: list
});
}
},
fail: (res) => {
if (typeof fail === "function") fail(res);
},
complete: (res) => {
if (typeof complete === "function") complete(res);
}
});
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
# 万能表格使用方式
{
key: "checkbox", title: "多选字段", type: "checkbox", width: 120, defaultValue: 1,
data: [
{ value:1, label:"选项一" },
{ value:2, label:"选项二" }
]
},
1
2
3
4
5
6
7
2
3
4
5
6
7
# template 使用方式
# 静态数据方式
应用场景：选项数据为静态数据的情况。
<vk-data-input-checkbox
v-model="form1.value"
:localdata="[
{ value:1, label:'选项一' },
{ value:2, label:'选项二' },
]"
></vk-data-input-checkbox>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 远程数据方式
应用场景：需要从数据库中获取选项的情况。
<vk-data-input-checkbox
v-model="form1.value"
:item-width="80"
action="admin/system/user/sys/getList"
:props="{ list:'rows', value:'_id', label:'nickname' }"
></vk-data-input-checkbox>
1
2
3
4
5
6
2
3
4
5
6