Skip to content

Commit ca7e3eb

Browse files
committed
feat: select add options prop
1 parent e78acf7 commit ca7e3eb

File tree

5 files changed

+68
-2
lines changed

5 files changed

+68
-2
lines changed

components/select/__tests__/__snapshots__/demo.test.js.snap

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,15 @@ exports[`renders ./components/select/demo/optgroup.md correctly 1`] = `
102102
</div>
103103
`;
104104
105+
exports[`renders ./components/select/demo/options.md correctly 1`] = `
106+
<div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width: 120px;">
107+
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" class="ant-select-selection ant-select-selection--single">
108+
<div class="ant-select-selection__rendered">
109+
<div title="北京 010" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">北京</div>
110+
</div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span></div>
111+
</div>
112+
`;
113+
105114
exports[`renders ./components/select/demo/search.md correctly 1`] = `
106115
<div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width: 200px;">
107116
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" class="ant-select-selection ant-select-selection--single">

components/select/demo/options.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
2+
<cn>
3+
#### 从数据直接生成
4+
使用 `options` 把 JSON 数据直接生成选择列表。
5+
</cn>
6+
7+
<us>
8+
#### Generate form options
9+
The select list can be populated using `options` property. This is a quick and easy way to provide the select content.
10+
</us>
11+
12+
```html
13+
<template>
14+
<a-select defaultValue="beijing" style="width: 120px" @change="handleChange" :options="options"/>
15+
</template>
16+
<script>
17+
export default {
18+
data(){
19+
return {
20+
options: [
21+
{
22+
label: '北京',
23+
value: 'beijing',
24+
title: '北京 010',
25+
key: '010',
26+
}, {
27+
label: '上海',
28+
value: 'shanghai',
29+
key: '021',
30+
}, {
31+
label: '杭州',
32+
value: 'hangzhou',
33+
key: '0571',
34+
disabled: true,
35+
}
36+
]
37+
}
38+
},
39+
methods: {
40+
handleChange(value) {
41+
console.log(`selected ${value}`);
42+
}
43+
}
44+
}
45+
</script>
46+
```
47+

components/select/index.en-US.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
| size | Size of Select input. `default` `large` `small` | string | default |
3636
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] | |
3737
| value(v-model) | Current selected option. | string\|number\|string\[]\|number\[] | - |
38-
38+
| options | Data of the selectOption, manual construction work is no longer needed if this property has been set | array&lt;{value, label, [disabled, key, title]}> | \[] |
3939

4040
### events
4141
| Events Name | Description | Arguments |

components/select/index.jsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ const SelectProps = {
6464
getPopupContainer: PropTypes.func,
6565
tokenSeparators: PropTypes.arrayOf(PropTypes.string),
6666
getInputElement: PropTypes.func,
67+
options: PropTypes.array,
6768
}
6869

6970
const SelectPropTypes = {
@@ -121,6 +122,7 @@ export default {
121122
prefixCls,
122123
size,
123124
mode,
125+
options,
124126
...restProps
125127
} = getOptionProps(this)
126128
const cls = {
@@ -157,7 +159,14 @@ export default {
157159

158160
return (
159161
<VcSelect {...selectProps}>
160-
{filterEmpty(this.$slots.default)}
162+
{
163+
options
164+
? options.map((option) => {
165+
const { key, label = option.title, ...restOption } = option
166+
return <Option key={key} {...{ props: restOption }}>{label}</Option>
167+
})
168+
: filterEmpty(this.$slots.default)
169+
}
161170
</VcSelect>
162171
)
163172
},

components/select/index.zh-CN.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
| size | 选择框大小,可选 `large` `small` | string | default |
3535
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | |
3636
| value(v-model) | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - |
37+
| options | options 数据,如果设置则不需要手动构造 selectOption 节点 | array&lt;{value, label, [disabled, key, title]}> | \[] |
3738

3839

3940
> 注意,如果发现下拉菜单跟随页面滚动,或者需要在其他弹层中触发 Select,请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。

0 commit comments

Comments
 (0)