feat: select add `options` prop

pull/165/head
tangjinzhou 2018-07-11 18:35:27 +08:00
parent e78acf7ae1
commit ca7e3eb22b
5 changed files with 68 additions and 2 deletions

View File

@ -102,6 +102,15 @@ exports[`renders ./components/select/demo/optgroup.md correctly 1`] = `
</div>
`;
exports[`renders ./components/select/demo/options.md correctly 1`] = `
<div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width: 120px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="北京 010" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">北京</div>
</div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span></div>
</div>
`;
exports[`renders ./components/select/demo/search.md correctly 1`] = `
<div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width: 200px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" class="ant-select-selection ant-select-selection--single">

View File

@ -0,0 +1,47 @@
<cn>
#### 从数据直接生成
使用 `options` 把 JSON 数据直接生成选择列表。
</cn>
<us>
#### Generate form options
The select list can be populated using `options` property. This is a quick and easy way to provide the select content.
</us>
```html
<template>
<a-select defaultValue="beijing" style="width: 120px" @change="handleChange" :options="options"/>
</template>
<script>
export default {
data(){
return {
options: [
{
label: '北京',
value: 'beijing',
title: '北京 010',
key: '010',
}, {
label: '上海',
value: 'shanghai',
key: '021',
}, {
label: '杭州',
value: 'hangzhou',
key: '0571',
disabled: true,
}
]
}
},
methods: {
handleChange(value) {
console.log(`selected ${value}`);
}
}
}
</script>
```

View File

@ -35,7 +35,7 @@
| size | Size of Select input. `default` `large` `small` | string | default |
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] | |
| value(v-model) | Current selected option. | string\|number\|string\[]\|number\[] | - |
| 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]}> | \[] |
### events
| Events Name | Description | Arguments |

View File

@ -64,6 +64,7 @@ const SelectProps = {
getPopupContainer: PropTypes.func,
tokenSeparators: PropTypes.arrayOf(PropTypes.string),
getInputElement: PropTypes.func,
options: PropTypes.array,
}
const SelectPropTypes = {
@ -121,6 +122,7 @@ export default {
prefixCls,
size,
mode,
options,
...restProps
} = getOptionProps(this)
const cls = {
@ -157,7 +159,14 @@ export default {
return (
<VcSelect {...selectProps}>
{filterEmpty(this.$slots.default)}
{
options
? options.map((option) => {
const { key, label = option.title, ...restOption } = option
return <Option key={key} {...{ props: restOption }}>{label}</Option>
})
: filterEmpty(this.$slots.default)
}
</VcSelect>
)
},

View File

@ -34,6 +34,7 @@
| size | 选择框大小,可选 `large` `small` | string | default |
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | |
| value(v-model) | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - |
| options | options 数据,如果设置则不需要手动构造 selectOption 节点 | array&lt;{value, label, [disabled, key, title]}> | \[] |
> 注意,如果发现下拉菜单跟随页面滚动,或者需要在其他弹层中触发 Select请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。