mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-02 03:58:05 +08:00
docs: fix typos and uniform punctuation in migration v3 (#5098)
This commit is contained in:
parent
f6725f86c2
commit
1d33c51d24
@ -240,51 +240,49 @@ Github:[https://github.com/surely-vue/table]
|
||||
|
||||
🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
|
||||
|
||||
- Open source documentation
|
||||
- Open source documentation.
|
||||
- Removed the `lazy` attribute of Transfer, it does not have a real optimization effect.
|
||||
- Removed the `combobox` mode of Select, please use `AutoComplete` instead.
|
||||
- Deprecated Button.Group, please use `Space` instead.
|
||||
- `Timeline.Item` new label
|
||||
- `Steps` added `responsive`, `percent`
|
||||
- `Collapse` added `ghost`, `collapsible`
|
||||
- `Popconfirm` added `cancelButton`, `okButton`, and `esc` button hiding
|
||||
- `ConfigProvider` added ConfigProvider.config to define the configuration of `Modal.xxx` `message` `notification`
|
||||
- `Tree` `TreeSelect`
|
||||
- `Timeline.Item` new label.
|
||||
- `Steps` added `responsive`, `percent`.
|
||||
- `Collapse` added `ghost`, `collapsible`.
|
||||
- `Popconfirm` added `cancelButton`, `okButton`, and `esc` button hiding.
|
||||
- `ConfigProvider` added ConfigProvider.config to define the configuration of `Modal.xxx` `message` `notification`.
|
||||
- `Tree` `TreeSelect`.
|
||||
|
||||
- Added virtual scrolling, discarded using `a-tree-node` `a-tree-select-node` to build nodes, using `treeData` property instead to improve component performance
|
||||
- Deprecated `scopedSlots` `slots` custom rendering node, and replace it with `v-slot:title` to improve ease of use, avoid slot configuration expansion, and also avoid slot conflicts
|
||||
- Added virtual scrolling, discarded using `a-tree-node` `a-tree-select-node` to build nodes, using `treeData` property instead to improve component performance.
|
||||
- Deprecated `scopedSlots` `slots` custom rendering node, and replace it with `v-slot:title` to improve ease of use, avoid slot configuration expansion, and also avoid slot conflicts.
|
||||
|
||||
- `Table`
|
||||
|
||||
- Removed the `rowSelection.hideDefaultSelections` property of Table, please use `SELECTION_ALL` and `SELECTION_INVERT` in `rowSelection.selections` instead, [custom options](/components/table/#components-table-demo- row-selection-custom).
|
||||
- Removed Column slots and replaced them with `v-slot:headerCell` `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` to improve ease of use , To avoid slot configuration expansion, but also to avoid the problem of slot conflicts
|
||||
- Added expandFixed to control whether the expanded icon is fixed
|
||||
- Removed Column slots and replaced them with `v-slot:headerCell` `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` to improve ease of use , To avoid slot configuration expansion, but also to avoid the problem of slot conflicts.
|
||||
- Added expandFixed to control whether the expanded icon is fixed.
|
||||
- Added the showSorterTooltip header whether to display the tooltip for the next sort.
|
||||
- Added sticky for setting sticky head and scroll bar
|
||||
- Added rowExpandable to set whether to allow row expansion
|
||||
- New slot headerCell is used to personalize the header cell
|
||||
- Added slot bodyCell for personalized cell
|
||||
- New slot customFilterDropdown is used to customize the filter menu, which needs to be used with `column.customFilterDropdown`
|
||||
- Added slot customFilterIcon for custom filter icons
|
||||
- New slot emptyText is used to customize the display content of empty data
|
||||
- Added slot summary for the summary column
|
||||
- Added sticky for setting sticky head and scroll bar.
|
||||
- Added rowExpandable to set whether to allow row expansion.
|
||||
- New slot headerCell is used to personalize the header cell.
|
||||
- Added slot bodyCell for personalized cell.
|
||||
- New slot customFilterDropdown is used to customize the filter menu, which needs to be used with `column.customFilterDropdown`.
|
||||
- Added slot customFilterIcon for custom filter icons.
|
||||
- New slot emptyText is used to customize the display content of empty data.
|
||||
- Added slot summary for the summary column.
|
||||
|
||||
- `DatePicker` `TimePicker` `Calendar`
|
||||
|
||||
- By default, a more lightweight dayjs is used to replace momentjs. If your project is too large and uses a lot of momentjs methods, you can refer to the document [Custom Time Library](/docs/vue/replace-date-cn), Replace with momentjs.
|
||||
- UI interaction adjustment, align with antd 4.x interaction specifications
|
||||
- UI interaction adjustment, align with antd 4.x interaction specifications.
|
||||
|
||||
- `Form` The main goal of this update is to improve performance. If you don't have custom form controls, you can almost ignore this part
|
||||
|
||||
- Since version 3.0, Form.Item no longer hijacks child elements, but automatically checks through provider/inject dependency injection. This method can improve component performance, and there is no limit to the number of child elements. The same is true for child elements. It can be a high-level component that is further encapsulated.
|
||||
|
||||
You can reference [Customized Form Controls](#components-form-demo-customized-form-controls)
|
||||
|
||||
But it also has some disadvantages:
|
||||
You can reference [Customized Form Controls](#components-form-demo-customized-form-controls), but it also has some disadvantages:
|
||||
|
||||
1. If the custom component wants Form.Item to be verified and displayed, you need to inject `const {id, onFieldChange, onFieldBlur} = useFormItemContext()` and call the corresponding method.
|
||||
|
||||
2. A Form.Item can only collect the data of one form item. If there are multiple form items, it will cause collection confusion, for example,
|
||||
2. A Form.Item can only collect the data of one form item. If there are multiple form items, it will cause collection confusion. For example,
|
||||
|
||||
```html
|
||||
<a-form-item>
|
||||
@ -293,7 +291,7 @@ Github:[https://github.com/surely-vue/table]
|
||||
</a-form-item>
|
||||
```
|
||||
|
||||
As above Form.Item does not know whether to collect `name="a"` or `name=`b``, you can solve this kind of problem in the following two ways:
|
||||
As above Form.Item does not know whether to collect `name="a"` or `name="b"`, you can solve this kind of problem in the following two ways:
|
||||
|
||||
The first is to use multiple `a-form-item`:
|
||||
|
||||
|
@ -239,49 +239,47 @@ Github:[https://github.com/surely-vue/table]
|
||||
|
||||
🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
|
||||
|
||||
- 文档开源,如果您的公司不能外网访问,可以私有化部署,但不可以传播,不可以商业化
|
||||
- 文档开源,如果您的公司不能外网访问,可以私有化部署,但不可以传播,不可以商业化。
|
||||
- 移除了 Transfer 的 `lazy` 属性,它并没有起到真正的优化效果。
|
||||
- 移除了 Select 的 `combobox` 模式,请使用 `AutoComplete` 替代。
|
||||
- 废弃 Button.Group,请使用 `Space` 代替。
|
||||
- `Timeline.Item` 新增 label
|
||||
- `Steps` 新增 `responsive`、`percent`
|
||||
- `Collapse` 新增 `ghost`、`collapsible`
|
||||
- `Popconfirm` 新增 `cancelButton`、`okButton`, 以及 `esc` 按键隐藏
|
||||
- `ConfigProvider` 新增 ConfigProvider.config,定义 `Modal.xxx` `message` `notification` 的配置
|
||||
- `Timeline.Item` 新增 label。
|
||||
- `Steps` 新增 `responsive`、`percent`。
|
||||
- `Collapse` 新增 `ghost`、`collapsible`。
|
||||
- `Popconfirm` 新增 `cancelButton`、`okButton`, 以及 `esc` 按键隐藏。
|
||||
- `ConfigProvider` 新增 ConfigProvider.config,定义 `Modal.xxx` `message` `notification` 的配置。
|
||||
- `Tree` `TreeSelect`
|
||||
|
||||
- 新增了虚拟滚动,废弃使用 `a-tree-node` `a-tree-select-node` 构建节点,使用 `treeData` 属性替代,提升组件性能
|
||||
- 废弃 `scopedSlots` `slots` 自定义渲染节点,使用 `v-slot:title` 替换,提升易用性,避免插槽配置膨胀,同时也避免了插槽冲突问题
|
||||
- 新增了虚拟滚动,废弃使用 `a-tree-node` `a-tree-select-node` 构建节点,使用 `treeData` 属性替代,提升组件性能。
|
||||
- 废弃 `scopedSlots` `slots` 自定义渲染节点,使用 `v-slot:title` 替换,提升易用性,避免插槽配置膨胀,同时也避免了插槽冲突问题。
|
||||
|
||||
- `Table`
|
||||
|
||||
- 移除了 Table 的 `rowSelection.hideDefaultSelections` 属性,请在 `rowSelection.selections` 中使用 `SELECTION_ALL` 和 `SELECTION_INVERT` 替代,[自定义选择项](/components/table/#components-table-demo-row-selection-custom)。
|
||||
- 移除了 Column slots,分别使用 `v-slot:headerCell` `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` 替换,提升易用性,避免插槽配置膨胀,同时也避免了插槽冲突问题
|
||||
- 新增 expandFixed 控制展开图标是否固定
|
||||
- 移除了 Column slots,分别使用 `v-slot:headerCell` `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` 替换,提升易用性,避免插槽配置膨胀,同时也避免了插槽冲突问题。
|
||||
- 新增 expandFixed 控制展开图标是否固定。
|
||||
- 新增 showSorterTooltip 表头是否显示下一次排序的 tooltip 提示。
|
||||
- 新增 sticky 用于设置粘性头部和滚动条
|
||||
- 新增 rowExpandable 用于设置是否允许行展开
|
||||
- 新增插槽 headerCell 用于个性化头部单元格
|
||||
- 新增插槽 bodyCell 用于个性化单元格
|
||||
- 新增插槽 customFilterDropdown 用于自定义筛选菜单,需要配合 `column.customFilterDropdown` 使用
|
||||
- 新增插槽 customFilterIcon 用于自定义筛选图标
|
||||
- 新增插槽 emptyText 用于自定义空数据时的显示内容
|
||||
- 新增插槽 summary 用于总结栏
|
||||
- 新增 sticky 用于设置粘性头部和滚动条。
|
||||
- 新增 rowExpandable 用于设置是否允许行展开。
|
||||
- 新增插槽 headerCell 用于个性化头部单元格。
|
||||
- 新增插槽 bodyCell 用于个性化单元格。
|
||||
- 新增插槽 customFilterDropdown 用于自定义筛选菜单,需要配合 `column.customFilterDropdown` 使用。
|
||||
- 新增插槽 customFilterIcon 用于自定义筛选图标。
|
||||
- 新增插槽 emptyText 用于自定义空数据时的显示内容。
|
||||
- 新增插槽 summary 用于总结栏。
|
||||
|
||||
- `DatePicker` `TimePicker` `Calendar`
|
||||
|
||||
- 默认使用更加轻量级的 dayjs 替换 momentjs,如果你的项目过大,使用了大量的 momentjs 的方法,你可以参考文档[自定义时间库](/docs/vue/replace-date-cn),替换成 momentjs。
|
||||
- UI 交互调整,对齐 antd 4.x 交互规范
|
||||
- UI 交互调整,对齐 antd 4.x 交互规范。
|
||||
|
||||
- `Form` 这次更新主要目标是提升性能,如果你没有自定义表单控件,几乎可以忽略该部分
|
||||
|
||||
- 自 3.0 版本以后,Form.Item 不再劫持子元素,而是通过 provider / inject 依赖注入的方式进行自动校验,这种方式可以提高组件性能,子元素也不会限制个数,同样子元素也可以是进一步封装的高级组件。你可以参考[自定义表单控件示例](#components-form-demo-customized-form-controls)
|
||||
|
||||
但它同样会有一些缺点:
|
||||
- 自 3.0 版本以后,Form.Item 不再劫持子元素,而是通过 provider / inject 依赖注入的方式进行自动校验,这种方式可以提高组件性能,子元素也不会限制个数,同样子元素也可以是进一步封装的高级组件。你可以参考[自定义表单控件示例](#components-form-demo-customized-form-controls),但它同样会有一些缺点:
|
||||
|
||||
1、自定义组件如果希望 Form.Item 进行校验展示,你需要 `const {id, onFieldChange, onFieldBlur} = useFormItemContext()` 注入,并调用相应的方法。
|
||||
|
||||
2、一个 Form.Item 只能收集一个表单项的数据,如果有多个表单项,会导致收集错乱,例如,
|
||||
2、一个 Form.Item 只能收集一个表单项的数据,如果有多个表单项,会导致收集错乱。例如:
|
||||
|
||||
```html
|
||||
<a-form-item>
|
||||
@ -290,7 +288,7 @@ Github:[https://github.com/surely-vue/table]
|
||||
</a-form-item>
|
||||
```
|
||||
|
||||
如上 Form.Item 并不知道需要收集 `name="a"` 还是 `name=`b``,你可以通过如下三种方式去解决此类问题:
|
||||
如上 Form.Item 并不知道需要收集 `name="a"` 还是 `name="b"`,你可以通过如下三种方式去解决此类问题:
|
||||
|
||||
第一种,使用多个 `a-form-item`:
|
||||
|
||||
@ -301,7 +299,7 @@ Github:[https://github.com/surely-vue/table]
|
||||
</a-form-item>
|
||||
```
|
||||
|
||||
第二种,使用自定义组件包裹,并在自定义组件中调用 `useFormItemContext`,相当于把多个表单项合并成了一个
|
||||
第二种,使用自定义组件包裹,并在自定义组件中调用 `useFormItemContext`,相当于把多个表单项合并成了一个。
|
||||
|
||||
```html
|
||||
<script>
|
||||
|
@ -4,7 +4,7 @@ The 2.x version is a compatible version developed for compatibility with Vue 3.
|
||||
|
||||
## Upgrade preparation
|
||||
|
||||
1. Please upgrade to the latest version of 2.x first, and remove/modify related APIs according to the warning information on the console. It is recommended to check the historical Change Log of 2.x first, which will not be detailed here.
|
||||
1. Please upgrade to the latest version of 2.x first, and remove/modify related APIs according to the warning information on the console. It is recommended to check the historical ChangeLog of 2.x first, which will not be detailed here.
|
||||
2. Upgrade the project to Vue 3.2 and above.
|
||||
|
||||
## 3.0 What are the incompatible changes
|
||||
@ -21,57 +21,55 @@ The 2.x version is a compatible version developed for compatibility with Vue 3.
|
||||
- Removed the `lazy` attribute of Transfer, it does not have a real optimization effect.
|
||||
- Removed the `combobox` mode of Select, please use `AutoComplete` instead.
|
||||
- Deprecated Button.Group, please use `Space` instead.
|
||||
- `DatePicker` `TimePicker` `Calendar` remove momentjs, please use dayjs instead
|
||||
- `DatePicker` `TimePicker` `Calendar` remove momentjs, please use dayjs instead.
|
||||
- `Tree`, `TreeSelect`
|
||||
- Deprecated the use of `a-tree-node` and `a-tree-select-node` to construct nodes, use the `treeData` property instead
|
||||
- Deprecated `scopedSlots` `slots` custom rendering node, use `v-slot:title` instead
|
||||
- Deprecated `replaceFields`, use `fieldNames` instead
|
||||
- Deprecated the use of `a-tree-node` and `a-tree-select-node` to construct nodes, use the `treeData` property instead.
|
||||
- Deprecated `scopedSlots` `slots` custom rendering node, use `v-slot:title` instead.
|
||||
- Deprecated `replaceFields`, use `fieldNames` instead.
|
||||
- `Table`
|
||||
- Removed the `rowSelection.hideDefaultSelections` property of Table, please use `SELECTION_ALL` and `SELECTION_INVERT` in `rowSelection.selections` instead, [custom options](/components/table/#components-table-demo- row-selection-custom).
|
||||
- Removed Column slots and replaced them with `v-slot:headerCell` `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon`
|
||||
- Removed Column slots and replaced them with `v-slot:headerCell` `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon`.
|
||||
|
||||
#### Component refactoring
|
||||
|
||||
In order to make the components have better performance and maintainability, we have used TS + Composition Api to refactor almost all components. There are still very few components that have not been refactored. Such components will be refactored gradually in the future, and the rest There will be no destructive updates to the components, so there is no need to worry about future upgrade costs.
|
||||
|
||||
Major updates after the 3.0 version refactoring include `Tree` `TreeSelect` `DatePicker` `TimePicker` `Calendar` `Form` `Table`, other components also have corresponding function updates, you can check ChangeLog for further details
|
||||
Major updates after the 3.0 version refactoring include `Tree` `TreeSelect` `DatePicker` `TimePicker` `Calendar` `Form` `Table`, other components also have corresponding function updates, you can check ChangeLog for further details.
|
||||
|
||||
- `Tree` `TreeSelect`
|
||||
|
||||
- Added virtual scrolling, discarded using `a-tree-node` `a-tree-select-node` to build nodes, using `treeData` property instead to improve component performance
|
||||
- Deprecated `scopedSlots` `slots` custom rendering node, and replace it with `v-slot:title` to improve ease of use, avoid slot configuration expansion, and also avoid slot conflicts
|
||||
- Added virtual scrolling, discarded using `a-tree-node` `a-tree-select-node` to build nodes, using `treeData` property instead to improve component performance.
|
||||
- Deprecated `scopedSlots` `slots` custom rendering node, and replace it with `v-slot:title` to improve ease of use, avoid slot configuration expansion, and also avoid slot conflicts.
|
||||
|
||||
- `Table`
|
||||
|
||||
- Removed the `rowSelection.hideDefaultSelections` property of Table, please use `SELECTION_ALL` and `SELECTION_INVERT` in `rowSelection.selections` instead, [custom options](/components/table/#components-table-demo- row-selection-custom).
|
||||
- Removed Column slots and replaced them with `v-slot:headerCell` `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` to improve ease of use , To avoid slot configuration expansion, but also to avoid the problem of slot conflicts
|
||||
- Added expandFixed to control whether the expanded icon is fixed
|
||||
- Removed Column slots and replaced them with `v-slot:headerCell` `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` to improve ease of use , To avoid slot configuration expansion, but also to avoid the problem of slot conflicts.
|
||||
- Added expandFixed to control whether the expanded icon is fixed.
|
||||
- Added the showSorterTooltip header whether to display the tooltip for the next sort.
|
||||
- Added sticky for setting sticky head and scroll bar
|
||||
- Added rowExpandable to set whether to allow row expansion
|
||||
- New slot headerCell is used to personalize the header cell
|
||||
- Added slot bodyCell for personalized cell
|
||||
- New slot customFilterDropdown is used to customize the filter menu, which needs to be used with `column.customFilterDropdown`
|
||||
- Added slot customFilterIcon for custom filter icons
|
||||
- New slot emptyText is used to customize the display content of empty data
|
||||
- Added slot summary for the summary column
|
||||
- Added sticky for setting sticky head and scroll bar.
|
||||
- Added rowExpandable to set whether to allow row expansion.
|
||||
- New slot headerCell is used to personalize the header cell.
|
||||
- Added slot bodyCell for personalized cell.
|
||||
- New slot customFilterDropdown is used to customize the filter menu, which needs to be used with `column.customFilterDropdown`.
|
||||
- Added slot customFilterIcon for custom filter icons.
|
||||
- New slot emptyText is used to customize the display content of empty data.
|
||||
- Added slot summary for the summary column.
|
||||
|
||||
- `DatePicker` `TimePicker` `Calendar`
|
||||
|
||||
- By default, a more lightweight dayjs is used to replace momentjs. If your project is too large and uses a lot of momentjs methods, you can refer to the document [Custom Time Library](/docs/vue/replace-date-cn), Replace with momentjs.
|
||||
- UI interaction adjustment, align with antd 4.x interaction specifications
|
||||
- UI interaction adjustment, align with antd 4.x interaction specifications.
|
||||
|
||||
- `Form` The main goal of this update is to improve performance. If you don't have custom form controls, you can almost ignore this part
|
||||
|
||||
- Since version 3.0, Form.Item no longer hijacks child elements, but automatically checks through provider/inject dependency injection. This method can improve component performance, and there is no limit to the number of child elements. The same is true for child elements. It can be a high-level component that is further encapsulated.
|
||||
|
||||
You can reference [Customized Form Controls](#components-form-demo-customized-form-controls)
|
||||
|
||||
But it also has some disadvantages:
|
||||
You can reference [Customized Form Controls](#components-form-demo-customized-form-controls), but it also has some disadvantages:
|
||||
|
||||
1. If the custom component wants Form.Item to be verified and displayed, you need to inject `const {id, onFieldChange, onFieldBlur} = useFormItemContext()` and call the corresponding method.
|
||||
|
||||
2. A Form.Item can only collect the data of one form item. If there are multiple form items, it will cause collection confusion, for example,
|
||||
2. A Form.Item can only collect the data of one form item. If there are multiple form items, it will cause collection confusion. For example:
|
||||
|
||||
```html
|
||||
<a-form-item>
|
||||
@ -80,7 +78,7 @@ Major updates after the 3.0 version refactoring include `Tree` `TreeSelect` `Dat
|
||||
</a-form-item>
|
||||
```
|
||||
|
||||
As above Form.Item does not know whether to collect `name="a"` or `name=`b``, you can solve this kind of problem in the following two ways:
|
||||
As above Form.Item does not know whether to collect `name="a"` or `name="b"`, you can solve this kind of problem in the following two ways:
|
||||
|
||||
The first is to use multiple `a-form-item`:
|
||||
|
||||
|
@ -4,7 +4,7 @@
|
||||
|
||||
## 升级准备
|
||||
|
||||
1. 请先升级到 2.x 的最新版本,按照控制台 warning 信息移除/修改相关的 API,建议优先查看 2.x 的历史 Change Log,在这里就不再详述。
|
||||
1. 请先升级到 2.x 的最新版本,按照控制台 warning 信息移除/修改相关的 API,建议优先查看 2.x 的历史 ChangeLog,在这里就不再详述。
|
||||
2. 升级项目 Vue 3.2 以上。
|
||||
3. 您和 3.0 只有这份文档的距离,相信我,今日加的班,是为了明天摸更多的鱼。
|
||||
|
||||
@ -22,55 +22,53 @@
|
||||
- 移除了 Transfer 的 `lazy` 属性,它并没有起到真正的优化效果。
|
||||
- 移除了 Select 的 `combobox` 模式,请使用 `AutoComplete` 替代。
|
||||
- 废弃 Button.Group,请使用 `Space` 代替。
|
||||
- `DatePicker` `TimePicker` `Calendar` 移除 momentjs,请使用 dayjs 替换
|
||||
- `DatePicker` `TimePicker` `Calendar` 移除 momentjs,请使用 dayjs 替换。
|
||||
- `Tree`、`TreeSelect`
|
||||
- 废弃使用 `a-tree-node` `a-tree-select-node` 构建节点,使用 `treeData` 属性替代
|
||||
- 废弃 `scopedSlots` `slots` 自定义渲染节点,使用 `v-slot:title` 替换
|
||||
- 废弃 `replaceFields` , 使用 `fieldNames` 替换
|
||||
- 废弃使用 `a-tree-node` `a-tree-select-node` 构建节点,使用 `treeData` 属性替代。
|
||||
- 废弃 `scopedSlots` `slots` 自定义渲染节点,使用 `v-slot:title` 替换。
|
||||
- 废弃 `replaceFields` , 使用 `fieldNames` 替换。
|
||||
- `Table`
|
||||
- 移除了 Table 的 `rowSelection.hideDefaultSelections` 属性,请在 `rowSelection.selections` 中使用 `SELECTION_ALL` 和 `SELECTION_INVERT` 替代,[自定义选择项](/components/table/#components-table-demo-row-selection-custom)。
|
||||
- 移除了 Column slots,分别使用 `v-slot:headerCell` `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` 替换
|
||||
- 移除了 Column slots,分别使用 `v-slot:headerCell` `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` 替换。
|
||||
|
||||
#### 组件重构
|
||||
|
||||
为了让组件拥有更好的性能和可维护性,我们几乎使用 TS + Composition Api 重构了所有组件,目前还有极个别的组件没有重构,这类组件会在接下来逐步重构,剩余的组件不会有破坏性更新,所以不用担心未来的升级成本。
|
||||
|
||||
3.0 版本重构后较大的更新有 `Tree` `TreeSelect` `DatePicker` `TimePicker` `Calendar` `Form` `Table`,其它组件也有相应功能的更新,你可以查看 ChangeLog 进一步了解详情
|
||||
3.0 版本重构后较大的更新有 `Tree` `TreeSelect` `DatePicker` `TimePicker` `Calendar` `Form` `Table`,其它组件也有相应功能的更新,你可以查看 ChangeLog 进一步了解详情。
|
||||
|
||||
- `Tree` `TreeSelect`
|
||||
|
||||
- 新增了虚拟滚动,废弃使用 `a-tree-node` `a-tree-select-node` 构建节点,使用 `treeData` 属性替代,提升组件性能
|
||||
- 废弃 `scopedSlots` `slots` 自定义渲染节点,使用 `v-slot:title` 替换,提升易用性,避免插槽配置膨胀,同时也避免了插槽冲突问题
|
||||
- 新增了虚拟滚动,废弃使用 `a-tree-node` `a-tree-select-node` 构建节点,使用 `treeData` 属性替代,提升组件性能。
|
||||
- 废弃 `scopedSlots` `slots` 自定义渲染节点,使用 `v-slot:title` 替换,提升易用性,避免插槽配置膨胀,同时也避免了插槽冲突问题。
|
||||
|
||||
- `Table`
|
||||
|
||||
- 移除了 Table 的 `rowSelection.hideDefaultSelections` 属性,请在 `rowSelection.selections` 中使用 `SELECTION_ALL` 和 `SELECTION_INVERT` 替代,[自定义选择项](/components/table/#components-table-demo-row-selection-custom)。
|
||||
- 移除了 Column slots,分别使用 `v-slot:headerCell` `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` 替换,提升易用性,避免插槽配置膨胀,同时也避免了插槽冲突问题
|
||||
- 新增 expandFixed 控制展开图标是否固定
|
||||
- 移除了 Column slots,分别使用 `v-slot:headerCell` `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` 替换,提升易用性,避免插槽配置膨胀,同时也避免了插槽冲突问题。
|
||||
- 新增 expandFixed 控制展开图标是否固定。
|
||||
- 新增 showSorterTooltip 表头是否显示下一次排序的 tooltip 提示。
|
||||
- 新增 sticky 用于设置粘性头部和滚动条
|
||||
- 新增 rowExpandable 用于设置是否允许行展开
|
||||
- 新增插槽 headerCell 用于个性化头部单元格
|
||||
- 新增插槽 bodyCell 用于个性化单元格
|
||||
- 新增插槽 customFilterDropdown 用于自定义筛选菜单,需要配合 `column.customFilterDropdown` 使用
|
||||
- 新增插槽 customFilterIcon 用于自定义筛选图标
|
||||
- 新增插槽 emptyText 用于自定义空数据时的显示内容
|
||||
- 新增插槽 summary 用于总结栏
|
||||
- 新增 sticky 用于设置粘性头部和滚动条。
|
||||
- 新增 rowExpandable 用于设置是否允许行展开。
|
||||
- 新增插槽 headerCell 用于个性化头部单元格。
|
||||
- 新增插槽 bodyCell 用于个性化单元格。
|
||||
- 新增插槽 customFilterDropdown 用于自定义筛选菜单,需要配合 `column.customFilterDropdown` 使用。
|
||||
- 新增插槽 customFilterIcon 用于自定义筛选图标。
|
||||
- 新增插槽 emptyText 用于自定义空数据时的显示内容。
|
||||
- 新增插槽 summary 用于总结栏。
|
||||
|
||||
- `DatePicker` `TimePicker` `Calendar`
|
||||
|
||||
- 默认使用更加轻量级的 dayjs 替换 momentjs,如果你的项目过大,使用了大量的 momentjs 的方法,你可以参考文档[自定义时间库](/docs/vue/replace-date-cn),替换成 momentjs。
|
||||
- UI 交互调整,对齐 antd 4.x 交互规范
|
||||
- UI 交互调整,对齐 antd 4.x 交互规范。
|
||||
|
||||
- `Form` 这次更新主要目标是提升性能,如果你没有自定义表单控件,几乎可以忽略该部分
|
||||
|
||||
- 自 3.0 版本以后,Form.Item 不再劫持子元素,而是通过 provider / inject 依赖注入的方式进行自动校验,这种方式可以提高组件性能,子元素也不会限制个数,同样子元素也可以是进一步封装的高级组件。你可以参考[自定义表单控件示例](#components-form-demo-customized-form-controls)
|
||||
|
||||
但它同样会有一些缺点:
|
||||
- 自 3.0 版本以后,Form.Item 不再劫持子元素,而是通过 provider / inject 依赖注入的方式进行自动校验,这种方式可以提高组件性能,子元素也不会限制个数,同样子元素也可以是进一步封装的高级组件。你可以参考[自定义表单控件示例](#components-form-demo-customized-form-controls),但它同样会有一些缺点:
|
||||
|
||||
1、自定义组件如果希望 Form.Item 进行校验展示,你需要 `const {id, onFieldChange, onFieldBlur} = useFormItemContext()` 注入,并调用相应的方法。
|
||||
|
||||
2、一个 Form.Item 只能收集一个表单项的数据,如果有多个表单项,会导致收集错乱,例如,
|
||||
2、一个 Form.Item 只能收集一个表单项的数据,如果有多个表单项,会导致收集错乱。例如:
|
||||
|
||||
```html
|
||||
<a-form-item>
|
||||
@ -79,7 +77,7 @@
|
||||
</a-form-item>
|
||||
```
|
||||
|
||||
如上 Form.Item 并不知道需要收集 `name="a"` 还是 `name=`b``,你可以通过如下三种方式去解决此类问题:
|
||||
如上 Form.Item 并不知道需要收集 `name="a"` 还是 `name="b"`,你可以通过如下三种方式去解决此类问题:
|
||||
|
||||
第一种,使用多个 `a-form-item`:
|
||||
|
||||
@ -90,7 +88,7 @@
|
||||
</a-form-item>
|
||||
```
|
||||
|
||||
第二种,使用自定义组件包裹,并在自定义组件中调用 `useFormItemContext`,相当于把多个表单项合并成了一个
|
||||
第二种,使用自定义组件包裹,并在自定义组件中调用 `useFormItemContext`,相当于把多个表单项合并成了一个。
|
||||
|
||||
```html
|
||||
<script>
|
||||
|
Loading…
Reference in New Issue
Block a user