feat: select add options prop

Author: tangjinzhou

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">

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>
+```
+

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 |

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>
       )
     },

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}` 将下拉弹层渲染节点固定在触发器的父元素中。