# select

# `Schema`类静态属性

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

{
  widget: 'select',
  title: '下拉框',
  preview: '',
  type: ['string', 'number', 'array', '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
  data: [{           // 当type为static时，可选项数据源，为{key, value}键值对
    key: "A",
    value: "A选项"
  }],
  url: "",           // 当type为 dynamic 时，接口地址
  adapter: "",       // 当type为 dynamic 时，适配脚本，使用见下方
  dynamicData: [],   // 当type为 dynamic 时，可选项数据源，经过 adapter 转换之后
  multiple: false    // 是否允许多选，为 true 时，表单值将变成数组
}

1
2
3
4
5
6
7
8
9
10
11

# `adapter`使用说明

示例

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

{
  type: "dynamic",
  data: [],
  url: "http://mock.com/list",
  adapter: "",
  dynamicData: [],
  multiple: false
}

1
2
3
4
5
6
7
8

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

[
  { id: 2, name: 'tom'},
  { id: 3, name: 'lilei'},
  ...
]

1
2
3
4
5

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

return data.map(function(item){
  return {key: item.id, value: item.name}
})

1
2
3

TIP

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

转换之后 dynamicData 的数据为：

[
  { key: 2, value: 'tom'},
  { key: 3, value: 'lilei'},
  ...
]

1
2
3
4
5

于是得到schema.option如下:

{
  type: "dynamic",
  data: [],
  url: "http://mock.com/list",
  adapter: "return data.map(function(item){return {key: item.id, value:  item.name}})",
  dynamicData: [],
  multiple: false
}

1
2
3
4
5
6
7
8

adapter注意

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

# 示例展示

# 静态数据示例

完整示例 codeSandbox (opens new window)

schema

{
  "key": "kGZL3x5Vx",
  "widget": "select",
  "hidden": false,
  "option": {
    "type": "static",
    "url": "",
    "adapter": "",
    "dynamicData": [],
    "data": [
      {
        "key": "1",
        "value": "技术部"
      },
      {
        "key": "2",
        "value": "产品部"
      }
    ],
    "multiple": false,
    "clearable": true
  },
  "name": "dept",
  "type": "string",
  "label": "部门",
  "description": "",
  "help": "",
  "disabled": false,
  "rules": [
    {
      "required": false,
      "message": "必填",
      "type": "string",
      "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

# 动态数据示例

完整示例 codeSandbox (opens new window)

schema

{
  "key": "kGZLAx5Vx",
  "widget": "select",
  "hidden": false,
  "option": {
    "type": "dynamic",
    "url": "https://j4wdo.csb.app/select-dynamic.json",
    "adapter": "return data.map(function(item){return {key: item.id, value:  item.name}})",
    "dynamicData": [],
    "data": [],
    "multiple": false,
    "clearable": true
  },
  "name": "dept",
  "type": "number",
  "label": "部门",
  "description": "",
  "help": "",
  "disabled": false,
  "rules": [
    {
      "required": false,
      "message": "必填",
      "type": "number",
      "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

# 表单值类型示例

完整示例 codeSandbox (opens new window)

WARNING

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

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

schema

[
  {
    "key": "kGZL1x5Vx",
    "widget": "select",
    "hidden": false,
    "option": {
      "type": "static",
      "url": "",
      "adapter": "",
      "dynamicData": [],
      "data": [
        {
          "key": "1",
          "value": "技术部"
        },
        {
          "key": "2",
          "value": "产品部"
        }
      ],
      "multiple": false,
      "clearable": true
    },
    "name": "deptString",
    "type": "string",
    "label": "部门string",
    "description": "",
    "help": "",
    "disabled": false,
    "rules": [
      {
        "required": false,
        "message": "必填",
        "type": "string",
        "trigger": "change"
      }
    ],
    "placeholder": "请选择..."
  },
  {
    "key": "kGZL1x5xx",
    "widget": "select",
    "hidden": false,
    "option": {
      "type": "static",
      "url": "",
      "adapter": "",
      "dynamicData": [],
      "data": [
        {
          "key": 1,
          "value": "技术部"
        },
        {
          "key": 2,
          "value": "产品部"
        }
      ],
      "multiple": false,
      "clearable": true
    },
    "name": "deptNumber",
    "type": "number",
    "label": "部门number",
    "description": "",
    "help": "",
    "disabled": false,
    "rules": [
      {
        "required": false,
        "message": "必填",
        "type": "number",
        "trigger": "change"
      }
    ],
    "placeholder": "请选择..."
  },
  {
    "key": "k10L3x5Vx",
    "widget": "select",
    "hidden": false,
    "option": {
      "type": "static",
      "url": "",
      "adapter": "",
      "dynamicData": [],
      "data": [
        {
          "key": 1,
          "value": "技术部"
        },
        {
          "key": 2,
          "value": "产品部"
        }
      ],
      "multiple": true,
      "clearable": true
    },
    "name": "deptMultNumber",
    "type": "array<number>",
    "label": "部门多选number",
    "description": "",
    "help": "",
    "disabled": false,
    "rules": [
      {
        "required": false,
        "message": "必填",
        "type": "array",
        "trigger": "change"
      }
    ],
    "placeholder": "请选择..."
  },
  {
    "key": "k1rL3x5Vx",
    "widget": "select",
    "hidden": false,
    "option": {
      "type": "static",
      "url": "",
      "adapter": "",
      "dynamicData": [],
      "data": [
        {
          "key": "1",
          "value": "技术部"
        },
        {
          "key": "2",
          "value": "产品部"
        }
      ],
      "multiple": true,
      "clearable": true
    },
    "name": "deptMultString",
    "type": "array<string>",
    "label": "部门多选string",
    "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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

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

单选时： adapter脚本中，可选项列表列表的key值类型必须与schema.rules[0].type一致，默认string
多选时： schema.rules[0].type为array，可选项列表的key值类型必须与schema.type的<>内值一致

例如多选时，可选项列表为：

[{key: 1, value: 'test'}]

则

schema.type为：array<number>
schema.rules为[{type: 'array', ...}]

← inputNumber cascader →