wicresoft
/
doc_project


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
							import{_ as a,a as s,q as t,k as e}from"./index.3fe853a6.js";const o={pageData:{title:"\u5347\u7EA7\u51C6\u5907",description:"",frontmatter:{},headers:[{level:2,title:"\u5347\u7EA7\u51C6\u5907",slug:"\u5347\u7EA7\u51C6\u5907",content:""},{level:2,title:"3.0 \u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316",slug:"_3-0-\u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316",content:"\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574"},{level:3,title:"\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574",slug:"\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574",content:""},{level:2,title:"\u9047\u5230\u95EE\u9898",slug:"\u9047\u5230\u95EE\u9898",content:"v3 \u505A\u4E86\u975E\u5E38\u591A\u7684\u7EC6\u8282\u6539\u8FDB\u548C\u91CD\u6784\uFF0C\u6211\u4EEC\u5C3D\u53EF\u80FD\u6536\u96C6\u4E86\u5DF2\u77E5\u7684\u6240\u6709\u4E0D\u517C\u5BB9\u53D8\u5316\u548C\u76F8\u5173\u5F71\u54CD\uFF0C\u4F46\u662F\u6709\u53EF\u80FD\u8FD8\u662F\u6709\u4E00\u4E9B\u573A\u666F\u6211\u4EEC\u6CA1\u6709\u8003\u8651\u5230\u3002\u5982\u679C\u4F60\u5728\u5347\u7EA7\u8FC7\u7A0B\u4E2D\u9047\u5230\u4E86\u95EE\u9898\uFF0C\u8BF7\u5230 [GitHub issues](https://vuecomponent.github.io/issue-helper/) \u8FDB\u884C\u53CD\u9988\u3002\u6211\u4EEC\u4F1A\u5C3D\u5FEB\u54CD\u5E94\u548C\u76F8\u5E94\u6539\u8FDB\u8FD9\u7BC7\u6587\u6863\u3002"}],relativePath:"site/src/vueDocs/migration-v3.zh-CN.md",content:"\u672C\u6587\u6863\u5C06\u5E2E\u52A9\u4F60\u4ECE ant-design-vue `2.x` \u7248\u672C\u5347\u7EA7\u5230 ant-design-vue `3.x` \u7248\u672C\u3002\n\n2.x \u7248\u672C\u662F\u4E3A\u4E86\u517C\u5BB9 Vue 3 \u5F00\u53D1\u7684\u517C\u5BB9\u7248\u672C\uFF0C\u4ED6\u5E76\u6CA1\u6709\u5E26\u6765\u5F88\u591A\u65B0\u7684\u7279\u6027\uFF0C\u5927\u591A\u6570\u7684 API \u6539\u53D8\u4E5F\u53EA\u662F\u4E3A\u4E86\u66F4\u597D\u7684\u517C\u5BB9 Vue 3\u3002 3.x \u7248\u672C\u5728\u6027\u80FD\u3001\u6613\u7528\u6027\u3001\u529F\u80FD\u4E0A\u90FD\u6709\u4E86\u5F88\u5927\u7684\u63D0\u5347\uFF0C3.x \u7248\u672C\u7A33\u5B9A\u540E\uFF0C\u6211\u4EEC\u4F1A\u5F52\u6863 2.x \u7248\u672C\uFF0C\u5EFA\u8BAE\u60A8\u5C3D\u5FEB\u5347\u7EA7 3.x \u7248\u672C\u3002\u867D\u7136\u6709\u5F88\u591A\u6539\u52A8\uFF0C\u4F46\u57FA\u672C\u90FD\u505A\u4E86\u517C\u5BB9\uFF0C\u4F60\u53EF\u4EE5\u6309\u7167\u63A7\u5236\u53F0\u7ED9\u51FA\u7684\u8B66\u544A\u9010\u6B65\u5347\u7EA7\u3002\n\n## \u5347\u7EA7\u51C6\u5907\n\n1. \u8BF7\u5148\u5347\u7EA7\u5230 2.x \u7684\u6700\u65B0\u7248\u672C\uFF0C\u6309\u7167\u63A7\u5236\u53F0 warning \u4FE1\u606F\u79FB\u9664/\u4FEE\u6539\u76F8\u5173\u7684 API\uFF0C\u5EFA\u8BAE\u4F18\u5148\u67E5\u770B 2.x \u7684\u5386\u53F2 ChangeLog\uFF0C\u5728\u8FD9\u91CC\u5C31\u4E0D\u518D\u8BE6\u8FF0\u3002\n2. \u5347\u7EA7\u9879\u76EE Vue 3.2 \u4EE5\u4E0A\u3002\n3. \u60A8\u548C 3.0 \u53EA\u6709\u8FD9\u4EFD\u6587\u6863\u7684\u8DDD\u79BB\uFF0C\u76F8\u4FE1\u6211\uFF0C\u4ECA\u65E5\u52A0\u7684\u73ED\uFF0C\u662F\u4E3A\u4E86\u660E\u5929\u6478\u66F4\u591A\u7684\u9C7C\u3002\n\n## 3.0 \u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316\n\n### \u8BBE\u8BA1\u89C4\u8303\u8C03\u6574\n\n- \u5B57\u4F53\u989C\u8272\u4ECE `rgba(0, 0, 0, 0.65)` \u8C03\u6DF1\u4E3A `rgba(0, 0, 0, 0.85)`\u3002\n- \u90E8\u5206\u7EC4\u4EF6\u9009\u4E2D\u989C\u8272\u7EDF\u4E00\u6539\u4E3A `@blue-1: #E6F7FF`\uFF0C\u5BF9\u5E94 `hover` \u989C\u8272\u6539\u4E3A `@gray-2: #FAFAFA`\u3002\n- \u62A5\u9519\u8272\u8272\u503C\u8C03\u6574\uFF0C\u7531 `@red-5: #F5222D` \u6539\u4E3A `@red-5: #FF4D4F`\u3002\n- DatePicker \u4EA4\u4E92\u91CD\u505A\uFF0C\u9762\u677F\u548C\u8F93\u5165\u6846\u5206\u79BB\uFF0C\u8303\u56F4\u9009\u62E9\u73B0\u53EF\u5355\u72EC\u9009\u62E9\u5F00\u59CB\u548C\u7ED3\u675F\u65F6\u95F4\u3002\n\n#### \u79FB\u9664\u7684 API\n\n- \u79FB\u9664\u4E86 Transfer \u7684 `lazy` \u5C5E\u6027\uFF0C\u5B83\u5E76\u6CA1\u6709\u8D77\u5230\u771F\u6B63\u7684\u4F18\u5316\u6548\u679C\u3002\n- \u79FB\u9664\u4E86 Select \u7684 `combobox` \u6A21\u5F0F\uFF0C\u8BF7\u4F7F\u7528 `AutoComplete` \u66FF\u4EE3\u3002\n- \u5E9F\u5F03 Button.Group\uFF0C\u8BF7\u4F7F\u7528 `Space` \u4EE3\u66FF\u3002\n- `DatePicker` `TimePicker` `Calendar` \u79FB\u9664 momentjs\uFF0C\u8BF7\u4F7F\u7528 dayjs \u66FF\u6362\u3002\n- `Tree`\u3001`TreeSelect`\n  - \u5E9F\u5F03\u4F7F\u7528 `a-tree-node` `a-tree-select-node` \u6784\u5EFA\u8282\u70B9\uFF0C\u4F7F\u7528 `treeData` \u5C5E\u6027\u66FF\u4EE3\u3002\n  - \u5E9F\u5F03 `scopedSlots` `slots` \u81EA\u5B9A\u4E49\u6E32\u67D3\u8282\u70B9\uFF0C\u4F7F\u7528 `v-slot:title` \u66FF\u6362\u3002\n  - \u5E9F\u5F03 `replaceFields` , \u4F7F\u7528 `fieldNames` \u66FF\u6362\u3002\n- `Table`\n  - \u79FB\u9664\u4E86 Table \u7684 `rowSelection.hideDefaultSelections` \u5C5E\u6027\uFF0C\u8BF7\u5728 `rowSelection.selections` \u4E2D\u4F7F\u7528 `SELECTION_ALL` \u548C `SELECTION_INVERT` \u66FF\u4EE3\uFF0C[\u81EA\u5B9A\u4E49\u9009\u62E9\u9879](/components/table/#components-table-demo-row-selection-custom)\u3002\n  - \u79FB\u9664\u4E86 Column slots\uFF0C\u5206\u522B\u4F7F\u7528 `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` \u66FF\u6362\u3002\n\n#### \u7EC4\u4EF6\u91CD\u6784\n\n\u4E3A\u4E86\u8BA9\u7EC4\u4EF6\u62E5\u6709\u66F4\u597D\u7684\u6027\u80FD\u548C\u53EF\u7EF4\u62A4\u6027\uFF0C\u6211\u4EEC\u51E0\u4E4E\u4F7F\u7528 TS + Composition Api \u91CD\u6784\u4E86\u6240\u6709\u7EC4\u4EF6\uFF0C\u76EE\u524D\u8FD8\u6709\u6781\u4E2A\u522B\u7684\u7EC4\u4EF6\u6CA1\u6709\u91CD\u6784\uFF0C\u8FD9\u7C7B\u7EC4\u4EF6\u4F1A\u5728\u63A5\u4E0B\u6765\u9010\u6B65\u91CD\u6784\uFF0C\u5269\u4F59\u7684\u7EC4\u4EF6\u4E0D\u4F1A\u6709\u7834\u574F\u6027\u66F4\u65B0\uFF0C\u6240\u4EE5\u4E0D\u7528\u62C5\u5FC3\u672A\u6765\u7684\u5347\u7EA7\u6210\u672C\u3002\n\n3.0 \u7248\u672C\u91CD\u6784\u540E\u8F83\u5927\u7684\u66F4\u65B0\u6709 `Tree` `TreeSelect` `DatePicker` `TimePicker` `Calendar` `Form` `Table` `AutoComplete`\uFF0C\u5176\u5B83\u7EC4\u4EF6\u4E5F\u6709\u76F8\u5E94\u529F\u80FD\u7684\u66F4\u65B0\uFF0C\u4F60\u53EF\u4EE5\u67E5\u770B ChangeLog \u8FDB\u4E00\u6B65\u4E86\u89E3\u8BE6\u60C5\u3002\n\n- `Tree` `TreeSelect`\n\n  - \u65B0\u589E\u4E86\u865A\u62DF\u6EDA\u52A8\uFF0C\u5E9F\u5F03\u4F7F\u7528 `a-tree-node` `a-tree-select-node` \u6784\u5EFA\u8282\u70B9\uFF0C\u4F7F\u7528 `treeData` \u5C5E\u6027\u66FF\u4EE3\uFF0C\u63D0\u5347\u7EC4\u4EF6\u6027\u80FD\u3002\n  - \u5E9F\u5F03 `scopedSlots` `slots` \u81EA\u5B9A\u4E49\u6E32\u67D3\u8282\u70B9\uFF0C\u4F7F\u7528 `v-slot:title` \u66FF\u6362\uFF0C\u63D0\u5347\u6613\u7528\u6027\uFF0C\u907F\u514D\u63D2\u69FD\u914D\u7F6E\u81A8\u80C0\uFF0C\u540C\u65F6\u4E5F\u907F\u514D\u4E86\u63D2\u69FD\u51B2\u7A81\u95EE\u9898\u3002\n\n- `AutoComplete`\n\n  - \u4E0D\u518D\u652F\u6301 `optionLabelProp`\uFF0C\u8BF7\u76F4\u63A5\u8BBE\u7F6E Option `value` \u5C5E\u6027\u3002\n  - \u9009\u9879\u4E0E Select \u5BF9\u9F50\uFF0C\u8BF7\u4F7F\u7528 `options` \u4EE3\u66FF `dataSource`\u3002\n\n- `Table`\n\n  - \u79FB\u9664\u4E86 Table \u7684 `rowSelection.hideDefaultSelections` \u5C5E\u6027\uFF0C\u8BF7\u5728 `rowSelection.selections` \u4E2D\u4F7F\u7528 `SELECTION_ALL` \u548C `SELECTION_INVERT` \u66FF\u4EE3\uFF0C[\u81EA\u5B9A\u4E49\u9009\u62E9\u9879](/components/table/#components-table-demo-row-selection-custom)\u3002\n  - \u79FB\u9664\u4E86 Column slots\uFF0C\u5206\u522B\u4F7F\u7528 `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` \u66FF\u6362\uFF0C\u63D0\u5347\u6613\u7528\u6027\uFF0C\u907F\u514D\u63D2\u69FD\u914D\u7F6E\u81A8\u80C0\uFF0C\u540C\u65F6\u4E5F\u907F\u514D\u4E86\u63D2\u69FD\u51B2\u7A81\u95EE\u9898\u3002\n  - \u65B0\u589E expandFixed \u63A7\u5236\u5C55\u5F00\u56FE\u6807\u662F\u5426\u56FA\u5B9A\u3002\n  - \u65B0\u589E showSorterTooltip \u8868\u5934\u662F\u5426\u663E\u793A\u4E0B\u4E00\u6B21\u6392\u5E8F\u7684 tooltip \u63D0\u793A\u3002\n  - \u65B0\u589E sticky \u7528\u4E8E\u8BBE\u7F6E\u7C98\u6027\u5934\u90E8\u548C\u6EDA\u52A8\u6761\u3002\n  - \u65B0\u589E rowExpandable \u7528\u4E8E\u8BBE\u7F6E\u662F\u5426\u5141\u8BB8\u884C\u5C55\u5F00\u3002\n  - \u65B0\u589E\u63D2\u69FD headerCell \u7528\u4E8E\u4E2A\u6027\u5316\u5934\u90E8\u5355\u5143\u683C\u3002\n  - \u65B0\u589E\u63D2\u69FD bodyCell \u7528\u4E8E\u4E2A\u6027\u5316\u5355\u5143\u683C\u3002\n  - \u65B0\u589E\u63D2\u69FD customFilterDropdown \u7528\u4E8E\u81EA\u5B9A\u4E49\u7B5B\u9009\u83DC\u5355\uFF0C\u9700\u8981\u914D\u5408 `column.customFilterDropdown` \u4F7F\u7528\u3002\n  - \u65B0\u589E\u63D2\u69FD customFilterIcon \u7528\u4E8E\u81EA\u5B9A\u4E49\u7B5B\u9009\u56FE\u6807\u3002\n  - \u65B0\u589E\u63D2\u69FD emptyText \u7528\u4E8E\u81EA\u5B9A\u4E49\u7A7A\u6570\u636E\u65F6\u7684\u663E\u793A\u5185\u5BB9\u3002\n  - \u65B0\u589E\u63D2\u69FD summary \u7528\u4E8E\u603B\u7ED3\u680F\u3002\n\n- `DatePicker` `TimePicker` `Calendar`\n\n  - \u9ED8\u8BA4\u4F7F\u7528\u66F4\u52A0\u8F7B\u91CF\u7EA7\u7684 dayjs \u66FF\u6362 momentjs\uFF0C\u5982\u679C\u4F60\u7684\u9879\u76EE\u8FC7\u5927\uFF0C\u4F7F\u7528\u4E86\u5927\u91CF\u7684 momentjs \u7684\u65B9\u6CD5\uFF0C\u4F60\u53EF\u4EE5\u53C2\u8003\u6587\u6863[\u81EA\u5B9A\u4E49\u65F6\u95F4\u5E93](/docs/vue/replace-date-cn)\uFF0C\u66FF\u6362\u6210 momentjs\u3002\n  - UI \u4EA4\u4E92\u8C03\u6574\uFF0C\u5BF9\u9F50 antd 4.x \u4EA4\u4E92\u89C4\u8303\u3002\n\n- `Form` \u8FD9\u6B21\u66F4\u65B0\u4E3B\u8981\u76EE\u6807\u662F\u63D0\u5347\u6027\u80FD\uFF0C\u5982\u679C\u4F60\u6CA1\u6709\u81EA\u5B9A\u4E49\u8868\u5355\u63A7\u4EF6\uFF0C\u51E0\u4E4E\u53EF\u4EE5\u5FFD\u7565\u8BE5\u90E8\u5206\n\n  - \u81EA 3.0 \u7248\u672C\u4EE5\u540E\uFF0CForm.Item \u4E0D\u518D\u52AB\u6301\u5B50\u5143\u7D20\uFF0C\u800C\u662F\u901A\u8FC7 provider / inject \u4F9D\u8D56\u6CE8\u5165\u7684\u65B9\u5F0F\u8FDB\u884C\u81EA\u52A8\u6821\u9A8C\uFF0C\u8FD9\u79CD\u65B9\u5F0F\u53EF\u4EE5\u63D0\u9AD8\u7EC4\u4EF6\u6027\u80FD\uFF0C\u5B50\u5143\u7D20\u4E5F\u4E0D\u4F1A\u9650\u5236\u4E2A\u6570\uFF0C\u540C\u6837\u5B50\u5143\u7D20\u4E5F\u53EF\u4EE5\u662F\u8FDB\u4E00\u6B65\u5C01\u88C5\u7684\u9AD8\u7EA7\u7EC4\u4EF6\u3002\u4F60\u53EF\u4EE5\u53C2\u8003[\u81EA\u5B9A\u4E49\u8868\u5355\u63A7\u4EF6\u793A\u4F8B](#components-form-demo-customized-form-controls)\uFF0C\u4F46\u5B83\u540C\u6837\u4F1A\u6709\u4E00\u4E9B\u7F3A\u70B9\uFF1A\n\n    1\u3001\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5982\u679C\u5E0C\u671B Form.Item \u8FDB\u884C\u6821\u9A8C\u5C55\u793A\uFF0C\u4F60\u9700\u8981 `const {id, onFieldChange, onFieldBlur} = useInjectFormItemContext()` \u6CE8\u5165\uFF0C\u5E76\u8C03\u7528\u76F8\u5E94\u7684\u65B9\u6CD5\u3002\n\n    2\u3001\u4E00\u4E2A Form.Item \u53EA\u80FD\u6536\u96C6\u4E00\u4E2A\u8868\u5355\u9879\u7684\u6570\u636E\uFF0C\u5982\u679C\u6709\u591A\u4E2A\u8868\u5355\u9879\uFF0C\u4F1A\u5BFC\u81F4\u6536\u96C6\u9519\u4E71\u3002\u4F8B\u5982\uFF1A\n\n    ```html\n    &lt;a-form-item&gt;\n      &lt;a-input name=&quot;a&quot;&gt;&lt;/a-input&gt;\n      &lt;a-input name=&quot;b&quot;&gt;&lt;/a-input&gt;\n    &lt;/a-form-item&gt;\n    ```\n\n    \u5982\u4E0A Form.Item \u5E76\u4E0D\u77E5\u9053\u9700\u8981\u6536\u96C6 `name=&quot;a&quot;` \u8FD8\u662F `name=&quot;b&quot;`\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7\u5982\u4E0B\u4E09\u79CD\u65B9\u5F0F\u53BB\u89E3\u51B3\u6B64\u7C7B\u95EE\u9898\uFF1A\n\n    \u7B2C\u4E00\u79CD\uFF0C\u4F7F\u7528\u591A\u4E2A `a-form-item`:\n\n    ```html\n    &lt;a-form-item&gt;\n      &lt;a-input name=&quot;a&quot;&gt;&lt;/a-input&gt;\n      &lt;a-form-item&gt;&lt;a-input name=&quot;b&quot;&gt;&lt;/a-input&gt;&lt;/a-form-item&gt;\n    &lt;/a-form-item&gt;\n    ```\n\n    \u7B2C\u4E8C\u79CD\uFF0C\u4F7F\u7528\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5305\u88F9\uFF0C\u5E76\u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u4E2D\u8C03\u7528 `useInjectFormItemContext`\uFF0C\u76F8\u5F53\u4E8E\u628A\u591A\u4E2A\u8868\u5355\u9879\u5408\u5E76\u6210\u4E86\u4E00\u4E2A\u3002\n\n    ```html\n    &lt;script&gt;\n      // \u81EA\u5B9A\u4E49\u7EC4\u4EF6\n      import { Form } from &#39;ant-design-vue&#39;;\n      export default {\n        setup() {\n          const formItemContext = Form.useInjectFormItemContext();\n        },\n      };\n    &lt;/script&gt;\n    ```\n\n    ```html\n    &lt;a-form-item&gt;\n      &lt;custom-com&gt;\n        &lt;a-input name=&quot;a&quot;&gt;&lt;/a-input&gt;\n        &lt;a-input name=&quot;b&quot;&gt;&lt;/a-input&gt;\n      &lt;/custom-com&gt;\n    &lt;/a-form-item&gt;\n    ```\n\n    \u7B2C\u4E09\u79CD\uFF0C\u7EC4\u4EF6\u5E93\u63D0\u4F9B\u4E86\u4E00\u4E2A `a-form-item-rest` \u7EC4\u4EF6\uFF0C\u5B83\u4F1A\u963B\u6B62\u6570\u636E\u7684\u6536\u96C6\uFF0C\u4F60\u53EF\u4EE5\u5C06\u4E0D\u9700\u8981\u6536\u96C6\u6821\u9A8C\u7684\u8868\u5355\u9879\u653E\u5230\u8FD9\u4E2A\u7EC4\u4EF6\u4E2D\u5373\u53EF\uFF0C\u5B83\u548C\u7B2C\u4E00\u79CD\u65B9\u5F0F\u5F88\u7C7B\u4F3C\uFF0C\u4F46\u5B83\u4E0D\u4F1A\u4EA7\u751F\u989D\u5916\u7684 dom \u8282\u70B9\u3002\n\n    ```html\n    &lt;a-form-item&gt;\n      &lt;a-input name=&quot;a&quot;&gt;&lt;/a-input&gt;\n      &lt;a-form-item-rest&gt;&lt;a-input name=&quot;b&quot;&gt;&lt;/a-input&gt;&lt;/a-form-item-rest&gt;\n    &lt;/a-form-item&gt;\n    ```\n\n## \u9047\u5230\u95EE\u9898\n\nv3 \u505A\u4E86\u975E\u5E38\u591A\u7684\u7EC6\u8282\u6539\u8FDB\u548C\u91CD\u6784\uFF0C\u6211\u4EEC\u5C3D\u53EF\u80FD\u6536\u96C6\u4E86\u5DF2\u77E5\u7684\u6240\u6709\u4E0D\u517C\u5BB9\u53D8\u5316\u548C\u76F8\u5173\u5F71\u54CD\uFF0C\u4F46\u662F\u6709\u53EF\u80FD\u8FD8\u662F\u6709\u4E00\u4E9B\u573A\u666F\u6211\u4EEC\u6CA1\u6709\u8003\u8651\u5230\u3002\u5982\u679C\u4F60\u5728\u5347\u7EA7\u8FC7\u7A0B\u4E2D\u9047\u5230\u4E86\u95EE\u9898\uFF0C\u8BF7\u5230 [GitHub issues](https://vuecomponent.github.io/issue-helper/) \u8FDB\u884C\u53CD\u9988\u3002\u6211\u4EEC\u4F1A\u5C3D\u5FEB\u54CD\u5E94\u548C\u76F8\u5E94\u6539\u8FDB\u8FD9\u7BC7\u6587\u6863\u3002\n",html:`<p>\u672C\u6587\u6863\u5C06\u5E2E\u52A9\u4F60\u4ECE ant-design-vue <code>2.x</code> \u7248\u672C\u5347\u7EA7\u5230 ant-design-vue <code>3.x</code> \u7248\u672C\u3002</p>
<p>2.x \u7248\u672C\u662F\u4E3A\u4E86\u517C\u5BB9 Vue 3 \u5F00\u53D1\u7684\u517C\u5BB9\u7248\u672C\uFF0C\u4ED6\u5E76\u6CA1\u6709\u5E26\u6765\u5F88\u591A\u65B0\u7684\u7279\u6027\uFF0C\u5927\u591A\u6570\u7684 API \u6539\u53D8\u4E5F\u53EA\u662F\u4E3A\u4E86\u66F4\u597D\u7684\u517C\u5BB9 Vue 3\u3002 3.x \u7248\u672C\u5728\u6027\u80FD\u3001\u6613\u7528\u6027\u3001\u529F\u80FD\u4E0A\u90FD\u6709\u4E86\u5F88\u5927\u7684\u63D0\u5347\uFF0C3.x \u7248\u672C\u7A33\u5B9A\u540E\uFF0C\u6211\u4EEC\u4F1A\u5F52\u6863 2.x \u7248\u672C\uFF0C\u5EFA\u8BAE\u60A8\u5C3D\u5FEB\u5347\u7EA7 3.x \u7248\u672C\u3002\u867D\u7136\u6709\u5F88\u591A\u6539\u52A8\uFF0C\u4F46\u57FA\u672C\u90FD\u505A\u4E86\u517C\u5BB9\uFF0C\u4F60\u53EF\u4EE5\u6309\u7167\u63A7\u5236\u53F0\u7ED9\u51FA\u7684\u8B66\u544A\u9010\u6B65\u5347\u7EA7\u3002</p>
<h2 id="\u5347\u7EA7\u51C6\u5907">\u5347\u7EA7\u51C6\u5907 <a class="header-anchor" href="#\u5347\u7EA7\u51C6\u5907">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<ol>
<li>\u8BF7\u5148\u5347\u7EA7\u5230 2.x \u7684\u6700\u65B0\u7248\u672C\uFF0C\u6309\u7167\u63A7\u5236\u53F0 warning \u4FE1\u606F\u79FB\u9664/\u4FEE\u6539\u76F8\u5173\u7684 API\uFF0C\u5EFA\u8BAE\u4F18\u5148\u67E5\u770B 2.x \u7684\u5386\u53F2 ChangeLog\uFF0C\u5728\u8FD9\u91CC\u5C31\u4E0D\u518D\u8BE6\u8FF0\u3002</li>
<li>\u5347\u7EA7\u9879\u76EE Vue 3.2 \u4EE5\u4E0A\u3002</li>
<li>\u60A8\u548C 3.0 \u53EA\u6709\u8FD9\u4EFD\u6587\u6863\u7684\u8DDD\u79BB\uFF0C\u76F8\u4FE1\u6211\uFF0C\u4ECA\u65E5\u52A0\u7684\u73ED\uFF0C\u662F\u4E3A\u4E86\u660E\u5929\u6478\u66F4\u591A\u7684\u9C7C\u3002</li>
</ol>
<h2 id="_3-0-\u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316">3.0 \u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316 <a class="header-anchor" href="#_3-0-\u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<h3 id="\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574">\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574 <a class="header-anchor" href="#\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<ul>
<li>\u5B57\u4F53\u989C\u8272\u4ECE <code>rgba(0, 0, 0, 0.65)</code> \u8C03\u6DF1\u4E3A <code>rgba(0, 0, 0, 0.85)</code>\u3002</li>
<li>\u90E8\u5206\u7EC4\u4EF6\u9009\u4E2D\u989C\u8272\u7EDF\u4E00\u6539\u4E3A <code>@blue-1: #E6F7FF</code>\uFF0C\u5BF9\u5E94 <code>hover</code> \u989C\u8272\u6539\u4E3A <code>@gray-2: #FAFAFA</code>\u3002</li>
<li>\u62A5\u9519\u8272\u8272\u503C\u8C03\u6574\uFF0C\u7531 <code>@red-5: #F5222D</code> \u6539\u4E3A <code>@red-5: #FF4D4F</code>\u3002</li>
<li>DatePicker \u4EA4\u4E92\u91CD\u505A\uFF0C\u9762\u677F\u548C\u8F93\u5165\u6846\u5206\u79BB\uFF0C\u8303\u56F4\u9009\u62E9\u73B0\u53EF\u5355\u72EC\u9009\u62E9\u5F00\u59CB\u548C\u7ED3\u675F\u65F6\u95F4\u3002</li>
</ul>
<h4 id="\u79FB\u9664\u7684-API">\u79FB\u9664\u7684 API <a class="header-anchor" href="#\u79FB\u9664\u7684-API">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h4>
<ul>
<li>\u79FB\u9664\u4E86 Transfer \u7684 <code>lazy</code> \u5C5E\u6027\uFF0C\u5B83\u5E76\u6CA1\u6709\u8D77\u5230\u771F\u6B63\u7684\u4F18\u5316\u6548\u679C\u3002</li>
<li>\u79FB\u9664\u4E86 Select \u7684 <code>combobox</code> \u6A21\u5F0F\uFF0C\u8BF7\u4F7F\u7528 <code>AutoComplete</code> \u66FF\u4EE3\u3002</li>
<li>\u5E9F\u5F03 Button.Group\uFF0C\u8BF7\u4F7F\u7528 <code>Space</code> \u4EE3\u66FF\u3002</li>
<li><code>DatePicker</code> <code>TimePicker</code> <code>Calendar</code> \u79FB\u9664 momentjs\uFF0C\u8BF7\u4F7F\u7528 dayjs \u66FF\u6362\u3002</li>
<li><code>Tree</code>\u3001<code>TreeSelect</code>
<ul>
<li>\u5E9F\u5F03\u4F7F\u7528 <code>a-tree-node</code> <code>a-tree-select-node</code> \u6784\u5EFA\u8282\u70B9\uFF0C\u4F7F\u7528 <code>treeData</code> \u5C5E\u6027\u66FF\u4EE3\u3002</li>
<li>\u5E9F\u5F03 <code>scopedSlots</code> <code>slots</code> \u81EA\u5B9A\u4E49\u6E32\u67D3\u8282\u70B9\uFF0C\u4F7F\u7528 <code>v-slot:title</code> \u66FF\u6362\u3002</li>
<li>\u5E9F\u5F03 <code>replaceFields</code> , \u4F7F\u7528 <code>fieldNames</code> \u66FF\u6362\u3002</li>
</ul>
</li>
<li><code>Table</code>
<ul>
<li>\u79FB\u9664\u4E86 Table \u7684 <code>rowSelection.hideDefaultSelections</code> \u5C5E\u6027\uFF0C\u8BF7\u5728 <code>rowSelection.selections</code> \u4E2D\u4F7F\u7528 <code>SELECTION_ALL</code> \u548C <code>SELECTION_INVERT</code> \u66FF\u4EE3\uFF0C<a href="/components/table/#components-table-demo-row-selection-custom">\u81EA\u5B9A\u4E49\u9009\u62E9\u9879</a>\u3002</li>
<li>\u79FB\u9664\u4E86 Column slots\uFF0C\u5206\u522B\u4F7F\u7528 <code>v-slot:headerCell</code> <code>v-slot:bodyCell</code> <code>v-slot:customFilterDropdown</code> <code>v-slot:customFilterIcon</code> \u66FF\u6362\u3002</li>
</ul>
</li>
</ul>
<h4 id="\u7EC4\u4EF6\u91CD\u6784">\u7EC4\u4EF6\u91CD\u6784 <a class="header-anchor" href="#\u7EC4\u4EF6\u91CD\u6784">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h4>
<p>\u4E3A\u4E86\u8BA9\u7EC4\u4EF6\u62E5\u6709\u66F4\u597D\u7684\u6027\u80FD\u548C\u53EF\u7EF4\u62A4\u6027\uFF0C\u6211\u4EEC\u51E0\u4E4E\u4F7F\u7528 TS + Composition Api \u91CD\u6784\u4E86\u6240\u6709\u7EC4\u4EF6\uFF0C\u76EE\u524D\u8FD8\u6709\u6781\u4E2A\u522B\u7684\u7EC4\u4EF6\u6CA1\u6709\u91CD\u6784\uFF0C\u8FD9\u7C7B\u7EC4\u4EF6\u4F1A\u5728\u63A5\u4E0B\u6765\u9010\u6B65\u91CD\u6784\uFF0C\u5269\u4F59\u7684\u7EC4\u4EF6\u4E0D\u4F1A\u6709\u7834\u574F\u6027\u66F4\u65B0\uFF0C\u6240\u4EE5\u4E0D\u7528\u62C5\u5FC3\u672A\u6765\u7684\u5347\u7EA7\u6210\u672C\u3002</p>
<p>3.0 \u7248\u672C\u91CD\u6784\u540E\u8F83\u5927\u7684\u66F4\u65B0\u6709 <code>Tree</code> <code>TreeSelect</code> <code>DatePicker</code> <code>TimePicker</code> <code>Calendar</code> <code>Form</code> <code>Table</code> <code>AutoComplete</code>\uFF0C\u5176\u5B83\u7EC4\u4EF6\u4E5F\u6709\u76F8\u5E94\u529F\u80FD\u7684\u66F4\u65B0\uFF0C\u4F60\u53EF\u4EE5\u67E5\u770B ChangeLog \u8FDB\u4E00\u6B65\u4E86\u89E3\u8BE6\u60C5\u3002</p>
<ul>
<li>
<p><code>Tree</code> <code>TreeSelect</code></p>
<ul>
<li>\u65B0\u589E\u4E86\u865A\u62DF\u6EDA\u52A8\uFF0C\u5E9F\u5F03\u4F7F\u7528 <code>a-tree-node</code> <code>a-tree-select-node</code> \u6784\u5EFA\u8282\u70B9\uFF0C\u4F7F\u7528 <code>treeData</code> \u5C5E\u6027\u66FF\u4EE3\uFF0C\u63D0\u5347\u7EC4\u4EF6\u6027\u80FD\u3002</li>
<li>\u5E9F\u5F03 <code>scopedSlots</code> <code>slots</code> \u81EA\u5B9A\u4E49\u6E32\u67D3\u8282\u70B9\uFF0C\u4F7F\u7528 <code>v-slot:title</code> \u66FF\u6362\uFF0C\u63D0\u5347\u6613\u7528\u6027\uFF0C\u907F\u514D\u63D2\u69FD\u914D\u7F6E\u81A8\u80C0\uFF0C\u540C\u65F6\u4E5F\u907F\u514D\u4E86\u63D2\u69FD\u51B2\u7A81\u95EE\u9898\u3002</li>
</ul>
</li>
<li>
<p><code>AutoComplete</code></p>
<ul>
<li>\u4E0D\u518D\u652F\u6301 <code>optionLabelProp</code>\uFF0C\u8BF7\u76F4\u63A5\u8BBE\u7F6E Option <code>value</code> \u5C5E\u6027\u3002</li>
<li>\u9009\u9879\u4E0E Select \u5BF9\u9F50\uFF0C\u8BF7\u4F7F\u7528 <code>options</code> \u4EE3\u66FF <code>dataSource</code>\u3002</li>
</ul>
</li>
<li>
<p><code>Table</code></p>
<ul>
<li>\u79FB\u9664\u4E86 Table \u7684 <code>rowSelection.hideDefaultSelections</code> \u5C5E\u6027\uFF0C\u8BF7\u5728 <code>rowSelection.selections</code> \u4E2D\u4F7F\u7528 <code>SELECTION_ALL</code> \u548C <code>SELECTION_INVERT</code> \u66FF\u4EE3\uFF0C<a href="/components/table/#components-table-demo-row-selection-custom">\u81EA\u5B9A\u4E49\u9009\u62E9\u9879</a>\u3002</li>
<li>\u79FB\u9664\u4E86 Column slots\uFF0C\u5206\u522B\u4F7F\u7528 <code>v-slot:headerCell</code> <code>v-slot:bodyCell</code> <code>v-slot:customFilterDropdown</code> <code>v-slot:customFilterIcon</code> \u66FF\u6362\uFF0C\u63D0\u5347\u6613\u7528\u6027\uFF0C\u907F\u514D\u63D2\u69FD\u914D\u7F6E\u81A8\u80C0\uFF0C\u540C\u65F6\u4E5F\u907F\u514D\u4E86\u63D2\u69FD\u51B2\u7A81\u95EE\u9898\u3002</li>
<li>\u65B0\u589E expandFixed \u63A7\u5236\u5C55\u5F00\u56FE\u6807\u662F\u5426\u56FA\u5B9A\u3002</li>
<li>\u65B0\u589E showSorterTooltip \u8868\u5934\u662F\u5426\u663E\u793A\u4E0B\u4E00\u6B21\u6392\u5E8F\u7684 tooltip \u63D0\u793A\u3002</li>
<li>\u65B0\u589E sticky \u7528\u4E8E\u8BBE\u7F6E\u7C98\u6027\u5934\u90E8\u548C\u6EDA\u52A8\u6761\u3002</li>
<li>\u65B0\u589E rowExpandable \u7528\u4E8E\u8BBE\u7F6E\u662F\u5426\u5141\u8BB8\u884C\u5C55\u5F00\u3002</li>
<li>\u65B0\u589E\u63D2\u69FD headerCell \u7528\u4E8E\u4E2A\u6027\u5316\u5934\u90E8\u5355\u5143\u683C\u3002</li>
<li>\u65B0\u589E\u63D2\u69FD bodyCell \u7528\u4E8E\u4E2A\u6027\u5316\u5355\u5143\u683C\u3002</li>
<li>\u65B0\u589E\u63D2\u69FD customFilterDropdown \u7528\u4E8E\u81EA\u5B9A\u4E49\u7B5B\u9009\u83DC\u5355\uFF0C\u9700\u8981\u914D\u5408 <code>column.customFilterDropdown</code> \u4F7F\u7528\u3002</li>
<li>\u65B0\u589E\u63D2\u69FD customFilterIcon \u7528\u4E8E\u81EA\u5B9A\u4E49\u7B5B\u9009\u56FE\u6807\u3002</li>
<li>\u65B0\u589E\u63D2\u69FD emptyText \u7528\u4E8E\u81EA\u5B9A\u4E49\u7A7A\u6570\u636E\u65F6\u7684\u663E\u793A\u5185\u5BB9\u3002</li>
<li>\u65B0\u589E\u63D2\u69FD summary \u7528\u4E8E\u603B\u7ED3\u680F\u3002</li>
</ul>
</li>
<li>
<p><code>DatePicker</code> <code>TimePicker</code> <code>Calendar</code></p>
<ul>
<li>\u9ED8\u8BA4\u4F7F\u7528\u66F4\u52A0\u8F7B\u91CF\u7EA7\u7684 dayjs \u66FF\u6362 momentjs\uFF0C\u5982\u679C\u4F60\u7684\u9879\u76EE\u8FC7\u5927\uFF0C\u4F7F\u7528\u4E86\u5927\u91CF\u7684 momentjs \u7684\u65B9\u6CD5\uFF0C\u4F60\u53EF\u4EE5\u53C2\u8003\u6587\u6863<a href="/docs/vue/replace-date-cn">\u81EA\u5B9A\u4E49\u65F6\u95F4\u5E93</a>\uFF0C\u66FF\u6362\u6210 momentjs\u3002</li>
<li>UI \u4EA4\u4E92\u8C03\u6574\uFF0C\u5BF9\u9F50 antd 4.x \u4EA4\u4E92\u89C4\u8303\u3002</li>
</ul>
</li>
<li>
<p><code>Form</code> \u8FD9\u6B21\u66F4\u65B0\u4E3B\u8981\u76EE\u6807\u662F\u63D0\u5347\u6027\u80FD\uFF0C\u5982\u679C\u4F60\u6CA1\u6709\u81EA\u5B9A\u4E49\u8868\u5355\u63A7\u4EF6\uFF0C\u51E0\u4E4E\u53EF\u4EE5\u5FFD\u7565\u8BE5\u90E8\u5206</p>
<ul>
<li>
<p>\u81EA 3.0 \u7248\u672C\u4EE5\u540E\uFF0CForm.Item \u4E0D\u518D\u52AB\u6301\u5B50\u5143\u7D20\uFF0C\u800C\u662F\u901A\u8FC7 provider / inject \u4F9D\u8D56\u6CE8\u5165\u7684\u65B9\u5F0F\u8FDB\u884C\u81EA\u52A8\u6821\u9A8C\uFF0C\u8FD9\u79CD\u65B9\u5F0F\u53EF\u4EE5\u63D0\u9AD8\u7EC4\u4EF6\u6027\u80FD\uFF0C\u5B50\u5143\u7D20\u4E5F\u4E0D\u4F1A\u9650\u5236\u4E2A\u6570\uFF0C\u540C\u6837\u5B50\u5143\u7D20\u4E5F\u53EF\u4EE5\u662F\u8FDB\u4E00\u6B65\u5C01\u88C5\u7684\u9AD8\u7EA7\u7EC4\u4EF6\u3002\u4F60\u53EF\u4EE5\u53C2\u8003<a href="#components-form-demo-customized-form-controls">\u81EA\u5B9A\u4E49\u8868\u5355\u63A7\u4EF6\u793A\u4F8B</a>\uFF0C\u4F46\u5B83\u540C\u6837\u4F1A\u6709\u4E00\u4E9B\u7F3A\u70B9\uFF1A</p>
<p>1\u3001\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5982\u679C\u5E0C\u671B Form.Item \u8FDB\u884C\u6821\u9A8C\u5C55\u793A\uFF0C\u4F60\u9700\u8981 <code>const {id, onFieldChange, onFieldBlur} = useInjectFormItemContext()</code> \u6CE8\u5165\uFF0C\u5E76\u8C03\u7528\u76F8\u5E94\u7684\u65B9\u6CD5\u3002</p>
<p>2\u3001\u4E00\u4E2A Form.Item \u53EA\u80FD\u6536\u96C6\u4E00\u4E2A\u8868\u5355\u9879\u7684\u6570\u636E\uFF0C\u5982\u679C\u6709\u591A\u4E2A\u8868\u5355\u9879\uFF0C\u4F1A\u5BFC\u81F4\u6536\u96C6\u9519\u4E71\u3002\u4F8B\u5982\uFF1A</p>
<pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-input</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-input</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">></span></span>
</code></pre>
<p>\u5982\u4E0A Form.Item \u5E76\u4E0D\u77E5\u9053\u9700\u8981\u6536\u96C6 <code>name=&quot;a&quot;</code> \u8FD8\u662F <code>name=&quot;b&quot;</code>\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7\u5982\u4E0B\u4E09\u79CD\u65B9\u5F0F\u53BB\u89E3\u51B3\u6B64\u7C7B\u95EE\u9898\uFF1A</p>
<p>\u7B2C\u4E00\u79CD\uFF0C\u4F7F\u7528\u591A\u4E2A <code>a-form-item</code>:</p>
<pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-input</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-input</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">></span></span>
</code></pre>
<p>\u7B2C\u4E8C\u79CD\uFF0C\u4F7F\u7528\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5305\u88F9\uFF0C\u5E76\u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u4E2D\u8C03\u7528 <code>useInjectFormItemContext</code>\uFF0C\u76F8\u5F53\u4E8E\u628A\u591A\u4E2A\u8868\u5355\u9879\u5408\u5E76\u6210\u4E86\u4E00\u4E2A\u3002</p>
<pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
  <span class="token comment">// \u81EA\u5B9A\u4E49\u7EC4\u4EF6</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> Form <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">;</span>
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> formItemContext <span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">useInjectFormItemContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
</code></pre>
<pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>custom-com</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-input</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-input</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>custom-com</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">></span></span>
</code></pre>
<p>\u7B2C\u4E09\u79CD\uFF0C\u7EC4\u4EF6\u5E93\u63D0\u4F9B\u4E86\u4E00\u4E2A <code>a-form-item-rest</code> \u7EC4\u4EF6\uFF0C\u5B83\u4F1A\u963B\u6B62\u6570\u636E\u7684\u6536\u96C6\uFF0C\u4F60\u53EF\u4EE5\u5C06\u4E0D\u9700\u8981\u6536\u96C6\u6821\u9A8C\u7684\u8868\u5355\u9879\u653E\u5230\u8FD9\u4E2A\u7EC4\u4EF6\u4E2D\u5373\u53EF\uFF0C\u5B83\u548C\u7B2C\u4E00\u79CD\u65B9\u5F0F\u5F88\u7C7B\u4F3C\uFF0C\u4F46\u5B83\u4E0D\u4F1A\u4EA7\u751F\u989D\u5916\u7684 dom \u8282\u70B9\u3002</p>
<pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-input</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item-rest</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-input</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item-rest</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">></span></span>
</code></pre>
</li>
</ul>
</li>
</ul>
<h2 id="\u9047\u5230\u95EE\u9898">\u9047\u5230\u95EE\u9898 <a class="header-anchor" href="#\u9047\u5230\u95EE\u9898">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>v3 \u505A\u4E86\u975E\u5E38\u591A\u7684\u7EC6\u8282\u6539\u8FDB\u548C\u91CD\u6784\uFF0C\u6211\u4EEC\u5C3D\u53EF\u80FD\u6536\u96C6\u4E86\u5DF2\u77E5\u7684\u6240\u6709\u4E0D\u517C\u5BB9\u53D8\u5316\u548C\u76F8\u5173\u5F71\u54CD\uFF0C\u4F46\u662F\u6709\u53EF\u80FD\u8FD8\u662F\u6709\u4E00\u4E9B\u573A\u666F\u6211\u4EEC\u6CA1\u6709\u8003\u8651\u5230\u3002\u5982\u679C\u4F60\u5728\u5347\u7EA7\u8FC7\u7A0B\u4E2D\u9047\u5230\u4E86\u95EE\u9898\uFF0C\u8BF7\u5230 <a href="https://vuecomponent.github.io/issue-helper/" target="_blank" rel="noopener noreferrer">GitHub issues</a> \u8FDB\u884C\u53CD\u9988\u3002\u6211\u4EEC\u4F1A\u5C3D\u5FEB\u54CD\u5E94\u548C\u76F8\u5E94\u6539\u8FDB\u8FD9\u7BC7\u6587\u6863\u3002</p>
`,lastUpdated:1748060269538}},p={class:"markdown"};function c(l,n,u,i,d,r){return e(),s("article",p,n[0]||(n[0]=[t(`<p>\u672C\u6587\u6863\u5C06\u5E2E\u52A9\u4F60\u4ECE ant-design-vue <code>2.x</code> \u7248\u672C\u5347\u7EA7\u5230 ant-design-vue <code>3.x</code> \u7248\u672C\u3002</p><p>2.x \u7248\u672C\u662F\u4E3A\u4E86\u517C\u5BB9 Vue 3 \u5F00\u53D1\u7684\u517C\u5BB9\u7248\u672C\uFF0C\u4ED6\u5E76\u6CA1\u6709\u5E26\u6765\u5F88\u591A\u65B0\u7684\u7279\u6027\uFF0C\u5927\u591A\u6570\u7684 API \u6539\u53D8\u4E5F\u53EA\u662F\u4E3A\u4E86\u66F4\u597D\u7684\u517C\u5BB9 Vue 3\u3002 3.x \u7248\u672C\u5728\u6027\u80FD\u3001\u6613\u7528\u6027\u3001\u529F\u80FD\u4E0A\u90FD\u6709\u4E86\u5F88\u5927\u7684\u63D0\u5347\uFF0C3.x \u7248\u672C\u7A33\u5B9A\u540E\uFF0C\u6211\u4EEC\u4F1A\u5F52\u6863 2.x \u7248\u672C\uFF0C\u5EFA\u8BAE\u60A8\u5C3D\u5FEB\u5347\u7EA7 3.x \u7248\u672C\u3002\u867D\u7136\u6709\u5F88\u591A\u6539\u52A8\uFF0C\u4F46\u57FA\u672C\u90FD\u505A\u4E86\u517C\u5BB9\uFF0C\u4F60\u53EF\u4EE5\u6309\u7167\u63A7\u5236\u53F0\u7ED9\u51FA\u7684\u8B66\u544A\u9010\u6B65\u5347\u7EA7\u3002</p><h2 id="\u5347\u7EA7\u51C6\u5907">\u5347\u7EA7\u51C6\u5907 <a class="header-anchor" href="#\u5347\u7EA7\u51C6\u5907"><span aria-hidden="true" class="anchor">#</span></a></h2><ol><li>\u8BF7\u5148\u5347\u7EA7\u5230 2.x \u7684\u6700\u65B0\u7248\u672C\uFF0C\u6309\u7167\u63A7\u5236\u53F0 warning \u4FE1\u606F\u79FB\u9664/\u4FEE\u6539\u76F8\u5173\u7684 API\uFF0C\u5EFA\u8BAE\u4F18\u5148\u67E5\u770B 2.x \u7684\u5386\u53F2 ChangeLog\uFF0C\u5728\u8FD9\u91CC\u5C31\u4E0D\u518D\u8BE6\u8FF0\u3002</li><li>\u5347\u7EA7\u9879\u76EE Vue 3.2 \u4EE5\u4E0A\u3002</li><li>\u60A8\u548C 3.0 \u53EA\u6709\u8FD9\u4EFD\u6587\u6863\u7684\u8DDD\u79BB\uFF0C\u76F8\u4FE1\u6211\uFF0C\u4ECA\u65E5\u52A0\u7684\u73ED\uFF0C\u662F\u4E3A\u4E86\u660E\u5929\u6478\u66F4\u591A\u7684\u9C7C\u3002</li></ol><h2 id="_3-0-\u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316">3.0 \u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316 <a class="header-anchor" href="#_3-0-\u6709\u54EA\u4E9B\u4E0D\u517C\u5BB9\u7684\u53D8\u5316"><span aria-hidden="true" class="anchor">#</span></a></h2><h3 id="\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574">\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574 <a class="header-anchor" href="#\u8BBE\u8BA1\u89C4\u8303\u8C03\u6574"><span aria-hidden="true" class="anchor">#</span></a></h3><ul><li>\u5B57\u4F53\u989C\u8272\u4ECE <code>rgba(0, 0, 0, 0.65)</code> \u8C03\u6DF1\u4E3A <code>rgba(0, 0, 0, 0.85)</code>\u3002</li><li>\u90E8\u5206\u7EC4\u4EF6\u9009\u4E2D\u989C\u8272\u7EDF\u4E00\u6539\u4E3A <code>@blue-1: #E6F7FF</code>\uFF0C\u5BF9\u5E94 <code>hover</code> \u989C\u8272\u6539\u4E3A <code>@gray-2: #FAFAFA</code>\u3002</li><li>\u62A5\u9519\u8272\u8272\u503C\u8C03\u6574\uFF0C\u7531 <code>@red-5: #F5222D</code> \u6539\u4E3A <code>@red-5: #FF4D4F</code>\u3002</li><li>DatePicker \u4EA4\u4E92\u91CD\u505A\uFF0C\u9762\u677F\u548C\u8F93\u5165\u6846\u5206\u79BB\uFF0C\u8303\u56F4\u9009\u62E9\u73B0\u53EF\u5355\u72EC\u9009\u62E9\u5F00\u59CB\u548C\u7ED3\u675F\u65F6\u95F4\u3002</li></ul><h4 id="\u79FB\u9664\u7684-API">\u79FB\u9664\u7684 API <a class="header-anchor" href="#\u79FB\u9664\u7684-API"><span aria-hidden="true" class="anchor">#</span></a></h4><ul><li>\u79FB\u9664\u4E86 Transfer \u7684 <code>lazy</code> \u5C5E\u6027\uFF0C\u5B83\u5E76\u6CA1\u6709\u8D77\u5230\u771F\u6B63\u7684\u4F18\u5316\u6548\u679C\u3002</li><li>\u79FB\u9664\u4E86 Select \u7684 <code>combobox</code> \u6A21\u5F0F\uFF0C\u8BF7\u4F7F\u7528 <code>AutoComplete</code> \u66FF\u4EE3\u3002</li><li>\u5E9F\u5F03 Button.Group\uFF0C\u8BF7\u4F7F\u7528 <code>Space</code> \u4EE3\u66FF\u3002</li><li><code>DatePicker</code> <code>TimePicker</code> <code>Calendar</code> \u79FB\u9664 momentjs\uFF0C\u8BF7\u4F7F\u7528 dayjs \u66FF\u6362\u3002</li><li><code>Tree</code>\u3001<code>TreeSelect</code><ul><li>\u5E9F\u5F03\u4F7F\u7528 <code>a-tree-node</code> <code>a-tree-select-node</code> \u6784\u5EFA\u8282\u70B9\uFF0C\u4F7F\u7528 <code>treeData</code> \u5C5E\u6027\u66FF\u4EE3\u3002</li><li>\u5E9F\u5F03 <code>scopedSlots</code> <code>slots</code> \u81EA\u5B9A\u4E49\u6E32\u67D3\u8282\u70B9\uFF0C\u4F7F\u7528 <code>v-slot:title</code> \u66FF\u6362\u3002</li><li>\u5E9F\u5F03 <code>replaceFields</code> , \u4F7F\u7528 <code>fieldNames</code> \u66FF\u6362\u3002</li></ul></li><li><code>Table</code><ul><li>\u79FB\u9664\u4E86 Table \u7684 <code>rowSelection.hideDefaultSelections</code> \u5C5E\u6027\uFF0C\u8BF7\u5728 <code>rowSelection.selections</code> \u4E2D\u4F7F\u7528 <code>SELECTION_ALL</code> \u548C <code>SELECTION_INVERT</code> \u66FF\u4EE3\uFF0C<a href="/components/table/#components-table-demo-row-selection-custom">\u81EA\u5B9A\u4E49\u9009\u62E9\u9879</a>\u3002</li><li>\u79FB\u9664\u4E86 Column slots\uFF0C\u5206\u522B\u4F7F\u7528 <code>v-slot:headerCell</code> <code>v-slot:bodyCell</code> <code>v-slot:customFilterDropdown</code> <code>v-slot:customFilterIcon</code> \u66FF\u6362\u3002</li></ul></li></ul><h4 id="\u7EC4\u4EF6\u91CD\u6784">\u7EC4\u4EF6\u91CD\u6784 <a class="header-anchor" href="#\u7EC4\u4EF6\u91CD\u6784"><span aria-hidden="true" class="anchor">#</span></a></h4><p>\u4E3A\u4E86\u8BA9\u7EC4\u4EF6\u62E5\u6709\u66F4\u597D\u7684\u6027\u80FD\u548C\u53EF\u7EF4\u62A4\u6027\uFF0C\u6211\u4EEC\u51E0\u4E4E\u4F7F\u7528 TS + Composition Api \u91CD\u6784\u4E86\u6240\u6709\u7EC4\u4EF6\uFF0C\u76EE\u524D\u8FD8\u6709\u6781\u4E2A\u522B\u7684\u7EC4\u4EF6\u6CA1\u6709\u91CD\u6784\uFF0C\u8FD9\u7C7B\u7EC4\u4EF6\u4F1A\u5728\u63A5\u4E0B\u6765\u9010\u6B65\u91CD\u6784\uFF0C\u5269\u4F59\u7684\u7EC4\u4EF6\u4E0D\u4F1A\u6709\u7834\u574F\u6027\u66F4\u65B0\uFF0C\u6240\u4EE5\u4E0D\u7528\u62C5\u5FC3\u672A\u6765\u7684\u5347\u7EA7\u6210\u672C\u3002</p><p>3.0 \u7248\u672C\u91CD\u6784\u540E\u8F83\u5927\u7684\u66F4\u65B0\u6709 <code>Tree</code> <code>TreeSelect</code> <code>DatePicker</code> <code>TimePicker</code> <code>Calendar</code> <code>Form</code> <code>Table</code> <code>AutoComplete</code>\uFF0C\u5176\u5B83\u7EC4\u4EF6\u4E5F\u6709\u76F8\u5E94\u529F\u80FD\u7684\u66F4\u65B0\uFF0C\u4F60\u53EF\u4EE5\u67E5\u770B ChangeLog \u8FDB\u4E00\u6B65\u4E86\u89E3\u8BE6\u60C5\u3002</p><ul><li><p><code>Tree</code> <code>TreeSelect</code></p><ul><li>\u65B0\u589E\u4E86\u865A\u62DF\u6EDA\u52A8\uFF0C\u5E9F\u5F03\u4F7F\u7528 <code>a-tree-node</code> <code>a-tree-select-node</code> \u6784\u5EFA\u8282\u70B9\uFF0C\u4F7F\u7528 <code>treeData</code> \u5C5E\u6027\u66FF\u4EE3\uFF0C\u63D0\u5347\u7EC4\u4EF6\u6027\u80FD\u3002</li><li>\u5E9F\u5F03 <code>scopedSlots</code> <code>slots</code> \u81EA\u5B9A\u4E49\u6E32\u67D3\u8282\u70B9\uFF0C\u4F7F\u7528 <code>v-slot:title</code> \u66FF\u6362\uFF0C\u63D0\u5347\u6613\u7528\u6027\uFF0C\u907F\u514D\u63D2\u69FD\u914D\u7F6E\u81A8\u80C0\uFF0C\u540C\u65F6\u4E5F\u907F\u514D\u4E86\u63D2\u69FD\u51B2\u7A81\u95EE\u9898\u3002</li></ul></li><li><p><code>AutoComplete</code></p><ul><li>\u4E0D\u518D\u652F\u6301 <code>optionLabelProp</code>\uFF0C\u8BF7\u76F4\u63A5\u8BBE\u7F6E Option <code>value</code> \u5C5E\u6027\u3002</li><li>\u9009\u9879\u4E0E Select \u5BF9\u9F50\uFF0C\u8BF7\u4F7F\u7528 <code>options</code> \u4EE3\u66FF <code>dataSource</code>\u3002</li></ul></li><li><p><code>Table</code></p><ul><li>\u79FB\u9664\u4E86 Table \u7684 <code>rowSelection.hideDefaultSelections</code> \u5C5E\u6027\uFF0C\u8BF7\u5728 <code>rowSelection.selections</code> \u4E2D\u4F7F\u7528 <code>SELECTION_ALL</code> \u548C <code>SELECTION_INVERT</code> \u66FF\u4EE3\uFF0C<a href="/components/table/#components-table-demo-row-selection-custom">\u81EA\u5B9A\u4E49\u9009\u62E9\u9879</a>\u3002</li><li>\u79FB\u9664\u4E86 Column slots\uFF0C\u5206\u522B\u4F7F\u7528 <code>v-slot:headerCell</code> <code>v-slot:bodyCell</code> <code>v-slot:customFilterDropdown</code> <code>v-slot:customFilterIcon</code> \u66FF\u6362\uFF0C\u63D0\u5347\u6613\u7528\u6027\uFF0C\u907F\u514D\u63D2\u69FD\u914D\u7F6E\u81A8\u80C0\uFF0C\u540C\u65F6\u4E5F\u907F\u514D\u4E86\u63D2\u69FD\u51B2\u7A81\u95EE\u9898\u3002</li><li>\u65B0\u589E expandFixed \u63A7\u5236\u5C55\u5F00\u56FE\u6807\u662F\u5426\u56FA\u5B9A\u3002</li><li>\u65B0\u589E showSorterTooltip \u8868\u5934\u662F\u5426\u663E\u793A\u4E0B\u4E00\u6B21\u6392\u5E8F\u7684 tooltip \u63D0\u793A\u3002</li><li>\u65B0\u589E sticky \u7528\u4E8E\u8BBE\u7F6E\u7C98\u6027\u5934\u90E8\u548C\u6EDA\u52A8\u6761\u3002</li><li>\u65B0\u589E rowExpandable \u7528\u4E8E\u8BBE\u7F6E\u662F\u5426\u5141\u8BB8\u884C\u5C55\u5F00\u3002</li><li>\u65B0\u589E\u63D2\u69FD headerCell \u7528\u4E8E\u4E2A\u6027\u5316\u5934\u90E8\u5355\u5143\u683C\u3002</li><li>\u65B0\u589E\u63D2\u69FD bodyCell \u7528\u4E8E\u4E2A\u6027\u5316\u5355\u5143\u683C\u3002</li><li>\u65B0\u589E\u63D2\u69FD customFilterDropdown \u7528\u4E8E\u81EA\u5B9A\u4E49\u7B5B\u9009\u83DC\u5355\uFF0C\u9700\u8981\u914D\u5408 <code>column.customFilterDropdown</code> \u4F7F\u7528\u3002</li><li>\u65B0\u589E\u63D2\u69FD customFilterIcon \u7528\u4E8E\u81EA\u5B9A\u4E49\u7B5B\u9009\u56FE\u6807\u3002</li><li>\u65B0\u589E\u63D2\u69FD emptyText \u7528\u4E8E\u81EA\u5B9A\u4E49\u7A7A\u6570\u636E\u65F6\u7684\u663E\u793A\u5185\u5BB9\u3002</li><li>\u65B0\u589E\u63D2\u69FD summary \u7528\u4E8E\u603B\u7ED3\u680F\u3002</li></ul></li><li><p><code>DatePicker</code> <code>TimePicker</code> <code>Calendar</code></p><ul><li>\u9ED8\u8BA4\u4F7F\u7528\u66F4\u52A0\u8F7B\u91CF\u7EA7\u7684 dayjs \u66FF\u6362 momentjs\uFF0C\u5982\u679C\u4F60\u7684\u9879\u76EE\u8FC7\u5927\uFF0C\u4F7F\u7528\u4E86\u5927\u91CF\u7684 momentjs \u7684\u65B9\u6CD5\uFF0C\u4F60\u53EF\u4EE5\u53C2\u8003\u6587\u6863<a href="/docs/vue/replace-date-cn">\u81EA\u5B9A\u4E49\u65F6\u95F4\u5E93</a>\uFF0C\u66FF\u6362\u6210 momentjs\u3002</li><li>UI \u4EA4\u4E92\u8C03\u6574\uFF0C\u5BF9\u9F50 antd 4.x \u4EA4\u4E92\u89C4\u8303\u3002</li></ul></li><li><p><code>Form</code> \u8FD9\u6B21\u66F4\u65B0\u4E3B\u8981\u76EE\u6807\u662F\u63D0\u5347\u6027\u80FD\uFF0C\u5982\u679C\u4F60\u6CA1\u6709\u81EA\u5B9A\u4E49\u8868\u5355\u63A7\u4EF6\uFF0C\u51E0\u4E4E\u53EF\u4EE5\u5FFD\u7565\u8BE5\u90E8\u5206</p><ul><li><p>\u81EA 3.0 \u7248\u672C\u4EE5\u540E\uFF0CForm.Item \u4E0D\u518D\u52AB\u6301\u5B50\u5143\u7D20\uFF0C\u800C\u662F\u901A\u8FC7 provider / inject \u4F9D\u8D56\u6CE8\u5165\u7684\u65B9\u5F0F\u8FDB\u884C\u81EA\u52A8\u6821\u9A8C\uFF0C\u8FD9\u79CD\u65B9\u5F0F\u53EF\u4EE5\u63D0\u9AD8\u7EC4\u4EF6\u6027\u80FD\uFF0C\u5B50\u5143\u7D20\u4E5F\u4E0D\u4F1A\u9650\u5236\u4E2A\u6570\uFF0C\u540C\u6837\u5B50\u5143\u7D20\u4E5F\u53EF\u4EE5\u662F\u8FDB\u4E00\u6B65\u5C01\u88C5\u7684\u9AD8\u7EA7\u7EC4\u4EF6\u3002\u4F60\u53EF\u4EE5\u53C2\u8003<a href="#components-form-demo-customized-form-controls">\u81EA\u5B9A\u4E49\u8868\u5355\u63A7\u4EF6\u793A\u4F8B</a>\uFF0C\u4F46\u5B83\u540C\u6837\u4F1A\u6709\u4E00\u4E9B\u7F3A\u70B9\uFF1A</p><p>1\u3001\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5982\u679C\u5E0C\u671B Form.Item \u8FDB\u884C\u6821\u9A8C\u5C55\u793A\uFF0C\u4F60\u9700\u8981 <code>const {id, onFieldChange, onFieldBlur} = useInjectFormItemContext()</code> \u6CE8\u5165\uFF0C\u5E76\u8C03\u7528\u76F8\u5E94\u7684\u65B9\u6CD5\u3002</p><p>2\u3001\u4E00\u4E2A Form.Item \u53EA\u80FD\u6536\u96C6\u4E00\u4E2A\u8868\u5355\u9879\u7684\u6570\u636E\uFF0C\u5982\u679C\u6709\u591A\u4E2A\u8868\u5355\u9879\uFF0C\u4F1A\u5BFC\u81F4\u6536\u96C6\u9519\u4E71\u3002\u4F8B\u5982\uFF1A</p><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-input</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-input</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span>
</code></pre><p>\u5982\u4E0A Form.Item \u5E76\u4E0D\u77E5\u9053\u9700\u8981\u6536\u96C6 <code>name=&quot;a&quot;</code> \u8FD8\u662F <code>name=&quot;b&quot;</code>\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7\u5982\u4E0B\u4E09\u79CD\u65B9\u5F0F\u53BB\u89E3\u51B3\u6B64\u7C7B\u95EE\u9898\uFF1A</p><p>\u7B2C\u4E00\u79CD\uFF0C\u4F7F\u7528\u591A\u4E2A <code>a-form-item</code>:</p><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-input</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-input</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span>
</code></pre><p>\u7B2C\u4E8C\u79CD\uFF0C\u4F7F\u7528\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5305\u88F9\uFF0C\u5E76\u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u4E2D\u8C03\u7528 <code>useInjectFormItemContext</code>\uFF0C\u76F8\u5F53\u4E8E\u628A\u591A\u4E2A\u8868\u5355\u9879\u5408\u5E76\u6210\u4E86\u4E00\u4E2A\u3002</p><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token comment">// \u81EA\u5B9A\u4E49\u7EC4\u4EF6</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> Form <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;ant-design-vue&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> formItemContext <span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">useInjectFormItemContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>custom-com</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-input</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-input</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>custom-com</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span>
</code></pre><p>\u7B2C\u4E09\u79CD\uFF0C\u7EC4\u4EF6\u5E93\u63D0\u4F9B\u4E86\u4E00\u4E2A <code>a-form-item-rest</code> \u7EC4\u4EF6\uFF0C\u5B83\u4F1A\u963B\u6B62\u6570\u636E\u7684\u6536\u96C6\uFF0C\u4F60\u53EF\u4EE5\u5C06\u4E0D\u9700\u8981\u6536\u96C6\u6821\u9A8C\u7684\u8868\u5355\u9879\u653E\u5230\u8FD9\u4E2A\u7EC4\u4EF6\u4E2D\u5373\u53EF\uFF0C\u5B83\u548C\u7B2C\u4E00\u79CD\u65B9\u5F0F\u5F88\u7C7B\u4F3C\uFF0C\u4F46\u5B83\u4E0D\u4F1A\u4EA7\u751F\u989D\u5916\u7684 dom \u8282\u70B9\u3002</p><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-input</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-form-item-rest</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-input</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item-rest</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-form-item</span><span class="token punctuation">&gt;</span></span>
</code></pre></li></ul></li></ul><h2 id="\u9047\u5230\u95EE\u9898">\u9047\u5230\u95EE\u9898 <a class="header-anchor" href="#\u9047\u5230\u95EE\u9898"><span aria-hidden="true" class="anchor">#</span></a></h2><p>v3 \u505A\u4E86\u975E\u5E38\u591A\u7684\u7EC6\u8282\u6539\u8FDB\u548C\u91CD\u6784\uFF0C\u6211\u4EEC\u5C3D\u53EF\u80FD\u6536\u96C6\u4E86\u5DF2\u77E5\u7684\u6240\u6709\u4E0D\u517C\u5BB9\u53D8\u5316\u548C\u76F8\u5173\u5F71\u54CD\uFF0C\u4F46\u662F\u6709\u53EF\u80FD\u8FD8\u662F\u6709\u4E00\u4E9B\u573A\u666F\u6211\u4EEC\u6CA1\u6709\u8003\u8651\u5230\u3002\u5982\u679C\u4F60\u5728\u5347\u7EA7\u8FC7\u7A0B\u4E2D\u9047\u5230\u4E86\u95EE\u9898\uFF0C\u8BF7\u5230 <a href="https://vuecomponent.github.io/issue-helper/" target="_blank" rel="noopener noreferrer">GitHub issues</a> \u8FDB\u884C\u53CD\u9988\u3002\u6211\u4EEC\u4F1A\u5C3D\u5FEB\u54CD\u5E94\u548C\u76F8\u5E94\u6539\u8FDB\u8FD9\u7BC7\u6587\u6863\u3002</p>`,15)]))}const m=a(o,[["render",c]]);export{m as default};