Epage

# cascader

# Schema类静态属性

Schema类静态属性请访问 Schema.js类静态属性 及 值逻辑与事件逻辑关系

{
  widget: "cascader",
  title: "级联选择",
  preview: '',
  type: ["array<string>", "array<number>"],
  validators: [],
  logic: {
    value: ["<>", "><"],
    event: []
  }
}
1
2
3
4
5
6
7
8
9
10
11

# schema.default

默认[]

# schema.option定义

schema完整定义请访问schema

{
  type: "dynamic",   // 可选项数据来源方式，可选：static、dynamic
  url: "",           // 当type为 dynamic 时，接口地址
  adapter: "",       // 当type为 dynamic 时，适配脚本，使用见下方
  dynamicData: [],   // 当type为 dynamic 时，可选项数据源。由 adapter 转换而来
  delimiter: "/",    // 父级与子层级连接符
  clearable: true,   // 是否显示清除图标
  notFoundText: "无匹配数据",
  filterable: false, // 是否模糊查询
  data: [
    {
      key: "A",            // 表单值
      value: "option A",   // 显示显示值
      children: [{
        key: "B",          // 下一级key值
        value: "option B", // 下一级显示值
      }]
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# adapter使用说明

  • 示例

需求：通过 http://mock.com/list 接口返回作为可选项

{
  type: "dynamic",
  url: "",
  adapter: "",
  dynamicData: [],
  delimiter: "/",
  clearable: true,
  notFoundText: "无匹配数据",
  filterable: false,
  data: []
}
1
2
3
4
5
6
7
8
9
10
11

假设 http://mock.com/list 返回值为

[
  {
    id: 2,
    name: 'tom',
    items: [
      { id: 3, name: 'lilei', items: []},
      // ...
    ]
  },
  ...
]
1
2
3
4
5
6
7
8
9
10
11

dynamicData 必须为 {key, value, children} 键值对列表，所以adapter可以这么写:

return util.convert2kv(data, function (item) {
  return { key: item.id, value: item.name }
}, 'items')
1
2
3

TIP

关于adapter如何写？以及adapter可用的内置方法可参考 Worker

转换之后 dynamicData 的数据为：

[
  {
    key: 2,
    value: 'tom',
    children: [
      { key: 3, value: 'lilei', children: []},
      // ...
    ]
  },
  ...
]
1
2
3
4
5
6
7
8
9
10
11

于是得到schema.option如下:

{
  type: "dynamic",
  data: [],
  url: "http://mock.com/list",
  adapter: "return util.convert2kv(data, function (item) { return { key: item.id, value: item.name } }, 'items')",
  dynamicData: [],
  delimiter: "/",
  clearable: true,
  notFoundText: "无匹配数据",
  filterable: false,
}
1
2
3
4
5
6
7
8
9
10
11

adapter注意

  • 最后必须return出数组
  • adapter内部被注入的data变量为接口返回值，可以根据此变量执行map操作返回，结果会自动传给dynamicData
  • return的数组必须为 {key, value} 键值对列表，key用于最终表单值，value用于显示

# 示例展示

# 静态数据示例

  • schema





 







 



































{
  "key": "kFc70c4El",
  "widget": "cascader",
  "hidden": false,
  "option": {
    "type": "static",
    "url": "",
    "adapter": "return data",
    "dynamicData": [],
    "delimiter": "/",
    "clearable": true,
    "notFoundText": "无匹配数据",
    "filterable": false,
    "data": [
      {
        "key": "A",
        "value": "A",
        "children": [
          {
            "key": "B",
            "value": "B",
            "children": []
          },
          {
            "key": "C",
            "value": "C",
            "children": []
          }
        ]
      }
    ]
  },
  "name": "kFc70c4El",
  "type": "array<string>",
  "label": "级联选择",
  "description": "",
  "help": "",
  "disabled": false,
  "rules": [
    {
      "required": false,
      "message": "必填",
      "type": "array",
      "trigger": "change"
    }
  ],
  "placeholder": "请选择"
}
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

# 动态数据示例

  • schema





 
 
 








 















{
  "key": "kFc70c4ql",
  "widget": "cascader",
  "hidden": false,
  "option": {
    "type": "dynamic",
    "url": "https://r68w4.csb.app/cascader-dynamic.json",
    "adapter": "return util.convert2kv(data, function(item){return {key: item.id + '', value: item.name}}, 'items')",
    "dynamicData": [],
    "delimiter": "/",
    "clearable": true,
    "notFoundText": "无匹配数据",
    "filterable": false,
    "data": []
  },
  "name": "kFc70c4ql",
  "type": "array<string>",
  "label": "级联选择",
  "description": "",
  "help": "",
  "disabled": false,
  "rules": [
    {
      "required": false,
      "message": "必填",
      "type": "array",
      "trigger": "change"
    }
  ],
  "placeholder": "请选择"
}
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

# 表单值类型示例

WARNING

请仔细观察示例表单值类型及下方schema高亮部分

schema.option.type 为 dynamic时，与实例中为static一样

  • schema

















 



 









 






























 



 









 
















[
  {
    "key": "ktIYYHWPG",
    "widget": "cascader",
    "hidden": false,
    "option": {
      "type": "static",
      "url": "",
      "adapter": "return data",
      "dynamicData": [],
      "delimiter": "/",
      "clearable": true,
      "notFoundText": "无匹配数据",
      "filterable": false,
      "data": [
        {
          "value": 1,
          "key": 1,
          "children": [
            {
              "value": 2,
              "key": 2,
              "children": [],
              "label": 2
            }
          ],
          "label": 1
        }
      ]
    },
    "name": "numCascader",
    "type": "array<number>",
    "label": "数字型级联",
    "description": "",
    "help": "",
    "disabled": false,
    "rules": [
      {
        "required": false,
        "message": "必填",
        "type": "array",
        "trigger": "change"
      }
    ],
    "placeholder": "请选择"
  },
  {
    "key": "ktIYYHWPc",
    "widget": "cascader",
    "hidden": false,
    "option": {
      "type": "static",
      "url": "",
      "adapter": "return data",
      "dynamicData": [],
      "delimiter": "/",
      "clearable": true,
      "notFoundText": "无匹配数据",
      "filterable": false,
      "data": [
        {
          "value": "1",
          "key": "1",
          "children": [
            {
              "value": "2",
              "key": "2",
              "children": [],
              "label": "2"
            }
          ],
          "label": "1"
        }
      ]
    },
    "name": "strCascader",
    "type": "array<string>",
    "label": "字符串级联",
    "description": "",
    "help": "",
    "disabled": false,
    "rules": [
      {
        "required": false,
        "message": "必填",
        "type": "array",
        "trigger": "change"
      }
    ],
    "placeholder": "请选择"
  }
  ]
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

这里可选项列表表示schema.option.data或schema.option.dynamicData

提示

  • schema.rules[0].type 始终为 array，表示form data值一定为数组，数组内是字符串还是数字可以根据schema.type确定
  • 以上仅以schema.option.type等于static时为例，等于dynamic时同理，只是adapter 中return的对象key值类型需要满足schema.type的要求

如：schema.type为array<string>，且schema.option.type 为 dynamic，接口返回的id为数字类型，adapter就需要如下操作：

// adapter，注意  item.key + ''
return util.convert2kv(data, function (item){
  return { key: item.key + '', value: item.name }
}, 'items')
1
2
3
4
更新: 4/6/2021, 11:10:45 PM

← autoComplete →