doc: update doc, close #5675
tangjinzhou
parent
3ddc7cdd7c
commit
e86a833b15
|
|
@ -564,7 +564,7 @@ Github：[https://github.com/surely-vue/table]
|
|||
|
||||
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.
|
||||
1. If the custom component wants Form.Item to be verified and displayed, you need to inject `const {id, onFieldChange, onFieldBlur} = useInjectFormItemContext()` 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,
|
||||
|
||||
|
|
@ -586,7 +586,7 @@ Github：[https://github.com/surely-vue/table]
|
|||
</a-form-item>
|
||||
```
|
||||
|
||||
The second way is to wrap it with a custom component and call `useFormItemContext` in the custom component, It is equivalent to merging multiple form items into one.
|
||||
The second way is to wrap it with a custom component and call `useInjectFormItemContext` in the custom component, It is equivalent to merging multiple form items into one.
|
||||
|
||||
```html
|
||||
<script>
|
||||
|
|
@ -595,7 +595,7 @@ Github：[https://github.com/surely-vue/table]
|
|||
export default {
|
||||
name: 'custom-name',
|
||||
setup() {
|
||||
const formItemContext = Form.useFormItemContext();
|
||||
const formItemContext = Form.useInjectFormItemContext();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -561,7 +561,7 @@ Github：[https://github.com/surely-vue/table]
|
|||
|
||||
- 自 3.0 版本以后，Form.Item 不再劫持子元素，而是通过 provider / inject 依赖注入的方式进行自动校验，这种方式可以提高组件性能，子元素也不会限制个数，同样子元素也可以是进一步封装的高级组件。你可以参考[自定义表单控件示例](#components-form-demo-customized-form-controls)，但它同样会有一些缺点：
|
||||
|
||||
1、自定义组件如果希望 Form.Item 进行校验展示，你需要 `const {id, onFieldChange, onFieldBlur} = useFormItemContext()` 注入，并调用相应的方法。
|
||||
1、自定义组件如果希望 Form.Item 进行校验展示，你需要 `const {id, onFieldChange, onFieldBlur} = useInjectFormItemContext()` 注入，并调用相应的方法。
|
||||
|
||||
2、一个 Form.Item 只能收集一个表单项的数据，如果有多个表单项，会导致收集错乱。例如：
|
||||
|
||||
|
|
@ -583,7 +583,7 @@ Github：[https://github.com/surely-vue/table]
|
|||
</a-form-item>
|
||||
```
|
||||
|
||||
第二种，使用自定义组件包裹，并在自定义组件中调用 `useFormItemContext`，相当于把多个表单项合并成了一个。
|
||||
第二种，使用自定义组件包裹，并在自定义组件中调用 `useInjectFormItemContext`，相当于把多个表单项合并成了一个。
|
||||
|
||||
```html
|
||||
<script>
|
||||
|
|
@ -591,7 +591,7 @@ Github：[https://github.com/surely-vue/table]
|
|||
import { Form } from 'ant-design-vue';
|
||||
export default {
|
||||
setup() {
|
||||
const formItemContext = Form.useFormItemContext();
|
||||
const formItemContext = Form.useInjectFormItemContext();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ The 2.x version is a compatible version developed for compatibility with Vue 3.
|
|||
- 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:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon`.
|
||||
|
||||
#### Component refactoring
|
||||
|
||||
|
|
@ -49,7 +49,7 @@ Major updates after the 3.0 version refactoring include `Tree` `TreeSelect` `Dat
|
|||
- `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.
|
||||
- Removed Column slots and replaced them with `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.
|
||||
|
|
@ -72,7 +72,7 @@ Major updates after the 3.0 version refactoring include `Tree` `TreeSelect` `Dat
|
|||
|
||||
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.
|
||||
1. If the custom component wants Form.Item to be verified and displayed, you need to inject `const {id, onFieldChange, onFieldBlur} = useInjectFormItemContext()` 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:
|
||||
|
||||
|
|
@ -94,7 +94,7 @@ Major updates after the 3.0 version refactoring include `Tree` `TreeSelect` `Dat
|
|||
</a-form-item>
|
||||
```
|
||||
|
||||
The second way is to wrap it with a custom component and call `useFormItemContext` in the custom component, It is equivalent to merging multiple form items into one.
|
||||
The second way is to wrap it with a custom component and call `useInjectFormItemContext` in the custom component, It is equivalent to merging multiple form items into one.
|
||||
|
||||
```html
|
||||
<script>
|
||||
|
|
@ -103,7 +103,7 @@ Major updates after the 3.0 version refactoring include `Tree` `TreeSelect` `Dat
|
|||
export default {
|
||||
name: 'custom-name',
|
||||
setup() {
|
||||
const formItemContext = Form.useFormItemContext();
|
||||
const formItemContext = Form.useInjectFormItemContext();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
- 废弃 `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:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` 替换。
|
||||
|
||||
#### 组件重构
|
||||
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
- `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:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` 替换，提升易用性，避免插槽配置膨胀，同时也避免了插槽冲突问题。
|
||||
- 新增 expandFixed 控制展开图标是否固定。
|
||||
- 新增 showSorterTooltip 表头是否显示下一次排序的 tooltip 提示。
|
||||
- 新增 sticky 用于设置粘性头部和滚动条。
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
|
||||
- 自 3.0 版本以后，Form.Item 不再劫持子元素，而是通过 provider / inject 依赖注入的方式进行自动校验，这种方式可以提高组件性能，子元素也不会限制个数，同样子元素也可以是进一步封装的高级组件。你可以参考[自定义表单控件示例](#components-form-demo-customized-form-controls)，但它同样会有一些缺点：
|
||||
|
||||
1、自定义组件如果希望 Form.Item 进行校验展示，你需要 `const {id, onFieldChange, onFieldBlur} = useFormItemContext()` 注入，并调用相应的方法。
|
||||
1、自定义组件如果希望 Form.Item 进行校验展示，你需要 `const {id, onFieldChange, onFieldBlur} = useInjectFormItemContext()` 注入，并调用相应的方法。
|
||||
|
||||
2、一个 Form.Item 只能收集一个表单项的数据，如果有多个表单项，会导致收集错乱。例如：
|
||||
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
</a-form-item>
|
||||
```
|
||||
|
||||
第二种，使用自定义组件包裹，并在自定义组件中调用 `useFormItemContext`，相当于把多个表单项合并成了一个。
|
||||
第二种，使用自定义组件包裹，并在自定义组件中调用 `useInjectFormItemContext`，相当于把多个表单项合并成了一个。
|
||||
|
||||
```html
|
||||
<script>
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
import { Form } from 'ant-design-vue';
|
||||
export default {
|
||||
setup() {
|
||||
const formItemContext = Form.useFormItemContext();
|
||||
const formItemContext = Form.useInjectFormItemContext();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue