feat: select add `options` prop
parent
e78acf7ae1
commit
ca7e3eb22b
|
@ -102,6 +102,15 @@ exports[`renders ./components/select/demo/optgroup.md correctly 1`] = `
|
||||||
</div>
|
</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`] = `
|
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 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">
|
<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 |
|
| size | Size of Select input. `default` `large` `small` | string | default |
|
||||||
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] | |
|
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] | |
|
||||||
| value(v-model) | Current selected option. | string\|number\|string\[]\|number\[] | - |
|
| 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
|
||||||
| Events Name | Description | Arguments |
|
| Events Name | Description | Arguments |
|
||||||
|
|
|
@ -64,6 +64,7 @@ const SelectProps = {
|
||||||
getPopupContainer: PropTypes.func,
|
getPopupContainer: PropTypes.func,
|
||||||
tokenSeparators: PropTypes.arrayOf(PropTypes.string),
|
tokenSeparators: PropTypes.arrayOf(PropTypes.string),
|
||||||
getInputElement: PropTypes.func,
|
getInputElement: PropTypes.func,
|
||||||
|
options: PropTypes.array,
|
||||||
}
|
}
|
||||||
|
|
||||||
const SelectPropTypes = {
|
const SelectPropTypes = {
|
||||||
|
@ -121,6 +122,7 @@ export default {
|
||||||
prefixCls,
|
prefixCls,
|
||||||
size,
|
size,
|
||||||
mode,
|
mode,
|
||||||
|
options,
|
||||||
...restProps
|
...restProps
|
||||||
} = getOptionProps(this)
|
} = getOptionProps(this)
|
||||||
const cls = {
|
const cls = {
|
||||||
|
@ -157,7 +159,14 @@ export default {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<VcSelect {...selectProps}>
|
<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>
|
</VcSelect>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
|
|
@ -34,6 +34,7 @@
|
||||||
| size | 选择框大小,可选 `large` `small` | string | default |
|
| size | 选择框大小,可选 `large` `small` | string | default |
|
||||||
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | |
|
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | |
|
||||||
| value(v-model) | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - |
|
| value(v-model) | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - |
|
||||||
|
| options | options 数据,如果设置则不需要手动构造 selectOption 节点 | array<{value, label, [disabled, key, title]}> | \[] |
|
||||||
|
|
||||||
|
|
||||||
> 注意,如果发现下拉菜单跟随页面滚动,或者需要在其他弹层中触发 Select,请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。
|
> 注意,如果发现下拉菜单跟随页面滚动,或者需要在其他弹层中触发 Select,请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。
|
||||||
|
|
Loading…
Reference in New Issue