# 11、cascader 级联选择
# 万能表单使用方式
# 静态数据方式
应用场景：选项数据为静态数据的情况。
示例
{
key: "cascader1", title: "本地数据级联", type: "cascader",
data: [
{
value: 1,
label: "数学",
children: [
{ value: 11, label: "奥数" },
{ value: 12, label: "微积分" }
]
},
{
value: 2,
label: "语文",
children: [
{ value: 21, label: "文言文" },
{ value: 22, label: "古诗" }
]
}
]
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 静态数据方式2
应用场景：选项数据需要通过函数计算
示例
{
key: "cascader1", title: "本地数据级联", type: "cascader",
data: () => {
let list = that.list;
return list;
}
},
1
2
3
4
5
6
7
2
3
4
5
6
7
# 远程数据方式
应用场景：需要从数据库中获取选项的情况。
示例
{
key: "cascader2", title: "云端数据级联", type: "cascader",
action: "admin/system/permission/sys/getAll",
props: {
list: "rows",
value: "permission_id",
label: "label",
children: "children",
// multiple:true
}
},
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 远程搜索带参数方式1
示例
{
key: "cascader2", title: "云端数据级联", type: "cascader",
action: "admin/system/permission/sys/getAll",
actionData: {
a: 1
},
props: {
list: "rows",
value: "permission_id",
label: "label",
children: "children",
// multiple:true
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 远程搜索带参数方式2
示例
{
key: "cascader2", title: "云端数据级联", type: "cascader",
action: "admin/system/permission/sys/getAll",
actionData: () => {
return {
a: that.form1.data.a
}
},
props: {
list: "rows",
value: "permission_id",
label: "label",
children: "children",
// multiple:true
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 远程懒加载方式
应用场景：数据量很大，一次性获取数据库容易超时时。
示例
云函数代码见本页面最下方。
{
key: "cascader2", title: "云端数据级联", type: "cascader",
action: "admin/system/menu/sys/getCascader",
props: {
list: "rows",
value: "menu_id",
label: "label",
children: "children",
lazy: true
}
},
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 遵守父子节点不互相关联
应用场景：选商品分类的时候，可以选择子分类，也可以直接选父分类
参数
checkStrictly:true（设置为true让所有节点都可以被直接选择）
emitPath:false（设置为false只返回被选中节点的值）
示例
云函数代码见本页面最下方。
{
key: "cascader2", title: "云端数据级联", type: "cascader",
action: "admin/system/menu/sys/getCascader",
props: {
list: "rows",
value: "menu_id",
label: "label",
children: "children",
checkStrictly: true,
emitPath: false
}
},
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# API
# 公共属性
# 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| data | 静态模式数据源 | Array、Function | - | - |
| action | 支持： 1、vk框架下的云函数地址 2、http请求地址 3、自定义function请求模式 | String、Function | 无 | - |
| props | 数据源的属性匹配规则 | Object | 查看props | - |
| showAllLevels | 输入框中是否显示选中值的完整路径 | Boolean | true | false |
| collapseTags | 多选模式下是否折叠Tag | Boolean | false | true |
| separator | 选项分隔符 | String | 斜杠' / ' | - |
| clearable | 是否可以清空选项 | Boolean | true | false |
| filterable | 是否可搜索选项 | Boolean | - | - |
| filterMethod | 自定义搜索逻辑，filterable:true时生效 | function(node, keyword) | - | - |
| debounce | 搜索关键词输入的去抖延迟，毫秒，filterable:true时生效 | Number | 300 | - |
| beforeFilter | 筛选之前的钩子，若返回 false 或者返回 Promise 且被 reject，则停止筛选，filterable:true时生效 | function(value) | - | - |
| isRequest | 是否是http请求模式 | Boolean | false | true |
| requestHeader | http请求头 | Object | - | - |
| requestMethod | http请求method | String | - | - |
# props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| expandTrigger | 次级菜单的展开方式 | String | click | hover |
| multiple | 是否多选 | Boolean | false | true |
| checkStrictly | 是否严格的遵守父子节点不互相关联 | Boolean | false | true |
| emitPath | 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值 | Boolean | true | false |
| lazy | 是否动态加载子节点，需与 lazyLoad 方法结合使用 | Boolean | false | true |
| lazyLoad | 加载动态数据的方法，仅在 lazy 为 true 时有效 function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用) | function(node, resolve) | - | - |
| value | 指定选项的值为选项对象的某个属性值 | String | value | - |
| label | 指定选项标签为选项对象的某个属性值 | String | label | - |
| children | 指定选项的子选项为选项对象的某个属性值 | String | children | - |
| disabled | 指定选项的禁用为选项对象的某个属性值 | String | disabled | - |
| leaf | 指定选项的叶子节点的标志位为选项对象的某个属性值，当 lazy = true 时生效 | String | leaf | - |
# onChange 使用示例
{
key: "cascader1", title: "cascader类型1", type: "cascader",
data: [
{
value: 1,
label: "数学",
children: [
{ value: 11, label: "奥数" },
{ value: 12, label: "微积分" }
]
},
{
value: 2,
label: "语文",
children: [
{ value: 21, label: "文言文" },
{ value: 22, label: "古诗" }
]
}
],
onChange: (val, formData, column, index, option) => {
console.log(1, val, formData, column, index, option);
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
推荐使用 watch 代替 onChange 传送门 - watch (opens new window)
# 自定义function请求模式
vk-unicloud-admin-ui 的npm依赖版本需 >= 1.17.17
此方式同样支持http，且更自由化，比如可以在发起请求前处理请求参数，在请求成功后，处理返回参数等等。
优势：更自由化、基本可以满足所有需求场景
劣势：代码量较多
# 自定义function-http请求模式示例
{
key: "cascader2", title: "云端数据级联", type: "cascader",
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") {
success({
rows: res.rows
});
}
},
fail: (res) => {
if (typeof fail === "function") fail(res);
},
complete: (res) => {
if (typeof complete === "function") complete(res);
}
});
},
props: {
list: "rows",
value: "permission_id",
label: "label",
children: "children",
// multiple:true
}
},
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
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
# 自定义function-云函数请求模式示例
{
key: "cascader2", title: "云端数据级联", type: "cascader",
action: (obj={})=>{
let {
data, // 请求数据
success, // 成功回调
fail, // 失败回调
complete, // 成功回调
} = obj;
// 发起http请求
vk.callFunction({
url: `admin/system/permission/sys/getAll`,
data: data,
success: (res) => {
if (typeof success === "function") {
success({
rows: res.rows
});
}
},
fail: (res) => {
if (typeof fail === "function") fail(res);
},
complete: (res) => {
if (typeof complete === "function") complete(res);
}
});
},
props: {
list: "rows",
value: "permission_id",
label: "label",
children: "children",
// multiple:true
}
},
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
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
# 万能表格使用方式
无
# template 使用方式
# 静态数据方式
应用场景：选项数据为静态数据的情况。
示例
<vk-data-input-cascader
v-model="form1.value"
:localdata="[
{
value:1,
label:'数学',
children:[
{ value:11,label:'奥数' },
{ value:12,label:'微积分' }
]
},
{
value:2,
label:'语文',
children:[
{ value:21, label:'文言文' },
{ value:22, label:'古诗' }
]
},
]"
placeholder="请选择"
></vk-data-input-cascader>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 远程数据方式
应用场景：需要从数据库中获取选项的情况。
示例
<vk-data-input-cascader
v-model="form1.value"
action="admin/system/permission/sys/getAll"
:props="{ list:'rows', value:'permission_id', label:'label', children:'children' }"
placeholder="请选择"
></vk-data-input-cascader>
1
2
3
4
5
6
2
3
4
5
6
# 远程懒加载方式云函数代码示例
示例
'use strict';
module.exports = {
/**
* 获取菜单级联数据(懒加载形式)
* @url admin/system/menu/sys/getCascader 前端调用的url参数地址
* data 请求参数 说明
* @param {Object} node 当前点击的节点
* res 返回参数说明
* @param {Number} code 错误码，0表示成功
* @param {String} msg 详细信息
*/
main: async (event) => {
let { data = {}, userInfo, util, filterResponse, originalParam } = event;
let { customUtil, uniID, config, pubFun, vk, db, _ } = util;
let { uid } = data;
let res = { code: 0, msg: "" };
// 业务逻辑开始-----------------------------------------------------------
let { node = {} } = data;
let whereJson = {
enable: true
};
if (node.root) {
whereJson["parent_id"] = null;
} else {
whereJson["parent_id"] = node.value;
}
res = await vk.baseDao.selects({
dbName: "opendb-admin-menus",
pageIndex: 1,
pageSize: 500,
whereJson,
sortArr: [{ name: "sort", type: "asc" }],
// 副表列表
foreignDB: [{
dbName: "opendb-admin-menus",
localKey: "menu_id",
foreignKey: "parent_id",
as: "hasChildren",
limit: 1, // 避免浪费查询,这里设置limit:1
}]
});
// 数据预处理
let rows = res.rows;
for (let i in rows) {
let item = rows[i];
rows[i].label = `${item.name}（${item.menu_id}）`;
if (vk.pubfn.isNull(item.hasChildren)) {
rows[i].leaf = true;
}
}
res.rows = rows;
// 业务逻辑结束-----------------------------------------------------------
return 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
43
44
45
46
47
48
49
50
51
52
53
54
55
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
43
44
45
46
47
48
49
50
51
52
53
54
55