Ant Design Vue V3

Posted on  by admin

Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js. In this article, we’ll look at how to use it in our Vue apps. We can add the validation-status prop to show the validation status on the form field:.

Not the answer you're looking for? Browse other questions tagged vue.jsantd or ask your own question.

  1. The help prop has the text that is below the form. labelCol has the size of the labels. wrapper-col has the wrapper’s columns.

  2. We can customize form controls by nesting our own controls into the a-form-item component:.

    • We have the price-input component to display the custom inputs from the component as one form field.

    • We can use form fields with the v-model directive. For example, we can write:.

Replace validateFieldsAndScroll with scrollToField#

Remove Form.create#

  • We register the FormModel plugin to let us use v-model to bind our form fields to reactive properties. v-model can be used with any other form control component with the FormModel plugin.

  • Form validation can be customized and we can bind form fields to reactive properties with v-model with Ant Design Vue.

  • Modified2 years, 10 months ago. I cannot get ant-design-vue Notification (or Message) to work in my project, which I created with vue-cli 3.

  • I am using the examples from https://vue.ant.design/components/notification/ but the Notifications do not appear.

  • After doing some research on the ant-design-vue issues on GitHub, I believe this may be due to a defect in ant-design-vue itself.

  • It does not appear to support Notification messages when a global render function is called, as is created by vue-cli 3, like this:.

  • I think that this is a defect because of this issue:. I believe that ant-design-vue Notification would work if I used this style to create my Vue object:.

  • However, when I change my main.js to use this second style of creating the Vue component, nothing renders in my SPA.

  • So I'm stuck - I can't use ant-design-vue Notification because I don't think it works with render: h => h(App), nor can I switch the way I create the Vue app to the way I think works with Notification.

  • Help is appreciated - I'm new to Javascript, Vue, and Ant Design. Rick RogersRick Rogers.

  • The answer to this question is here:. Rick RogersRick Rogers.

  • Form of v4 does not need to create context by calling Form.create().

  • Form now has it's own data scope and you don't need getFieldDecorator anymore.

Nested field paths using arrays#

  • Just use Form.Item directly:. Since Form.create() is removed, methods like onFieldsChange have moved to Form and form state is controlled by a fields prop.

  • If you want to control form, you can use Form.useForm() to create Form instance for operation:.

    • For class component, you can use ref to access instance:. If you don't want to use the Item style, you can use noStyle prop to remove it:.

  • New Form uses incremental update which only updates related field. So if there is some linkage between fields or updates with the whole form, you can use dependencies or shouldUpdate to handle that.

Remove callback in validateFields#

  • You need to listen to onSubmit and call validateFields to handle validation in old Form.

  • New Form provides onFinish which will only trigger when validation has passed:.

  • New version recommend use onFinish for submit after validation. Thus validateFieldsAndScroll is changed to more flexible method scrollToField:.

  • Besides, we move initialValue into Form to avoid field with same name both using initialValue to cause conflict:.

  • In v3, modifying the initialValue of un-operated field will update the field value synchronously, which is a bug.

  • However, since it has been used as a feature for a long time, we have not fixed it. In v4, the bug has been fixed.

  • initialValues only takes effect when initializing and resetting the form. In the past versions we used .

  • to represent nested paths (such as user.name to represent { user: { name: '' } }). However, in some backend systems, .

  • is also included in the variable name. This causes the user to need additional code to convert, so in the new version, nested paths are represented by arrays to avoid unexpected behavior (eg ['user', 'name']).

  • Therefore, paths returned by methods such as getFieldsError are always in an array form for the user to handle:.

  • Nested field definition has changed from:. Similarly using setFieldsValue has changed from:. validateFields will return a Promise, so you can handle the error with async/await or then/catch.

  • It is no longer necessary to determine if errors is empty:. Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.

  • In this article, we’ll look at how to use it in our Vue apps. We can add a header and sidebar together.

  • For example, we can write:. We put the a-layout-header component on top. Then the a-layout contains the a-layout-sider with the sidebar.

  • a-sub-menu has the submenus. The bottom a-layout has the content. We can also add a header and content without the sidebar:.

  • We just add the a-layout-content without the a-layout component. Also, we can add the sidebar without the header:.

  • We can add various layouts with Ant Design Vue.

  • Removed combobox mode, please use AutoComplete instead.

  • Removed the rowSelection.hideDefaultSelections property of Table, please use SELECTION_ALL and SELECTION_INVERT in rowSelection.selections instead, Custom Selection.

  • Deprecated Button.Group, please use Space instead.

  • less variables were changed like DatePicker/TimePicker/Calendar related variables or @btn-padding-base, please check 3.x variables and 4.x variables for more details.

Initialization#

In antd @ 3.9.0, we introduced the svg icon (Why use the svg icon?). The icon API using the string name cannot be loaded on demand, so the svg icon file is fully introduced, which greatly increases the size of the packaged product. In 4.0, we adjusted the icon usage API to support tree shaking, reducing the default package size of antd by about 150 KB (Gzipped).

Legacy Icon usage will be discarded:

It will be imported on demand in v4:

You will still be able to continue using the compatibility pack:

Customized Validation

  • Form rewrite.

    • No need to use Form.create.

    • Nest fields definition changes from 'xxx.yyy' to ['xxx', 'yyy'].

    • validateTrigger no long collect field value.

    • See here for migration documentation.

  • DatePicker rewrite

    • Provide the picker property for selector switching.

    • Range selection can now select start and end times individually.

    • onPanelChange will also trigger when panel value changed.

    • Date cell className of Custom style demo changed from ant-calendar-date to ant-picker-cell-inner.

  • Tree, Select, TreeSelect, AutoComplete rewrite

    • use virtual scrolling.

    • onBlur no longer trigger value change and return React origin event object instead.

      • If config validateTrigger as onBlur with compatible Form, please change to onChange instead.

    • AutoComplete no longer support optionLabelProp. Please set Option value directly.

    • AutoComplete options definition align with Select. Please use options instead of dataSource.

    • Select remove dropdownMenuStyle prop.

    • Use listHeight to config popup height instead of dropdownStyle.

    • filterOption return origin data with second params instead. No need to use option.props.children for matching.

    • Tree, TreeSelect will display label when title and label are both set. The adjustment is for aligning behavior with labelInValue. New behavior (show 'label' on first node). Old behavior (show 'title' on first node).

  • The Grid component uses flex layout.

  • Button's danger is now treated as a property instead of a button type.

  • Input, Select set value to undefined is uncontrolled mode now.

  • Table rewrite.

    • will keep at least one column even if columns is empty.

    • Nest dataIndex definition changes from 'xxx.yyy' to ['xxx', 'yyy'].

  • Pagination

    • will default set showSizeChanger to true since 4.1.0. This change also applied on Table component.

    • onChange will also trigger when pageSize value changed.

  • Tabs rewrite. (4.3.0)

    • Dom structrue is changed, please check style if you override tabs css.

    • onPrevClickonNextClick would be not working anymore since we improve tabs scroll behavior.

Customized Form Controls

You can manually check the code one by one against the above list for modification. In addition, we also provide a codemod cli tool @ant-design/codemod-v4 To help you quickly upgrade to v4.

Before running codemod cli, please submit your local code changes.

For parts that cannot be modified automatically, codemod will prompt on the command line, and it is recommended to modify them manually as prompted. After modification, you can run the above command repeatedly to check.

Note that codemod cannot cover all scenarios, and it is recommended to check for incompatible changes one by one.

Form control#

@ant-design/codemod-v4 will help you migrate to antd v4. Obsolete components will be kept running through @ant-design/compatible. Generally, you don't need to migrate manually. The following sections detail the overall migration and changes.

Form Model

Note: Old Form imported from @ ant-design / compatible has change the class name from .ant-form to .ant-legacy-form. Need to be modified accordingly if override the style.

Header and Side Bar

replace onSubmit with onFinish#

Header and Content

Conclusion

Related Posts

v4 made a lot of detailed improvements and refactoring. We collected all known incompatible changes and related impacts as much as possible, but there may be some scenarios we have not considered. If you encounter problems during the upgrade, please go to GitHub issues and codemod Issues for feedback. We will respond and improve this document as soon as possible.