feat: select add `options` prop
parent
e78acf7ae1
commit
ca7e3eb22b
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
```
|
||||
|
|
@ -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<{value, label, [disabled, key, title]}> | \[] |
|
||||
|
||||
### events
|
||||
| Events Name | Description | Arguments |
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
},
|
||||
|
|
|
@ -34,6 +34,7 @@
|
|||
| size | 选择框大小,可选 `large` `small` | string | default |
|
||||
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | |
|
||||
| value(v-model) | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - |
|
||||
| options | options 数据,如果设置则不需要手动构造 selectOption 节点 | array<{value, label, [disabled, key, title]}> | \[] |
|
||||
|
||||
|
||||
> 注意,如果发现下拉菜单跟随页面滚动,或者需要在其他弹层中触发 Select,请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。
|
||||
|
|
Loading…
Reference in New Issue