diff --git a/components/select/__tests__/__snapshots__/demo.test.js.snap b/components/select/__tests__/__snapshots__/demo.test.js.snap index 2636ecb6d..ec6190c60 100644 --- a/components/select/__tests__/__snapshots__/demo.test.js.snap +++ b/components/select/__tests__/__snapshots__/demo.test.js.snap @@ -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"> diff --git a/components/select/demo/options.md b/components/select/demo/options.md new file mode 100644 index 000000000..fdfc4dc95 --- /dev/null +++ b/components/select/demo/options.md @@ -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> +``` + diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index 86a856325..55cc8a212 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -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 | diff --git a/components/select/index.jsx b/components/select/index.jsx index 7b8563293..d50aadfb4 100644 --- a/components/select/index.jsx +++ b/components/select/index.jsx @@ -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> ) }, diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index be7dd2a5d..400eaab64 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -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}` 将下拉弹层渲染节点固定在触发器的父元素中。