mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
fix: Fixed columns z-index issue (#28346)
* fix: Fixed columns z-index issue * fix lint
This commit is contained in:
二货机器人
GitHub
parent
17be61f2df
commit
857cbe1b23
@ -21,8 +21,6 @@ yarn-error.log
|
||||
*.snap
|
||||
components/*/*.js
|
||||
components/*/*.jsx
|
||||
components/*/*.md
|
||||
docs/**/*.md
|
||||
.gitignore
|
||||
.npmignore
|
||||
.prettierignore
|
||||
|
||||
@ -31,6 +31,6 @@ Alert component for feedback.
|
||||
### Alert.ErrorBoundary
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| ----------- | -------------------------------- | --------- | ----------------- | ------- |
|
||||
| description | Custom error description to show | ReactNode | {{ error stack }} | |
|
||||
| message | Custom error message to show | ReactNode | {{ error }} | |
|
||||
|
||||
@ -43,7 +43,7 @@ When there is a need for autocomplete functionality.
|
||||
## Methods
|
||||
|
||||
| Name | Description | Version |
|
||||
| --- | --- | --- |
|
||||
| ------- | ------------ | ------- |
|
||||
| blur() | Remove focus | |
|
||||
| focus() | Get focus | |
|
||||
|
||||
|
||||
@ -51,7 +51,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
|
||||
## 方法
|
||||
|
||||
| 名称 | 描述 | 版本 |
|
||||
| --- | --- | --- |
|
||||
| ------- | -------- | ---- |
|
||||
| blur() | 移除焦点 | |
|
||||
| focus() | 获取焦点 | |
|
||||
|
||||
|
||||
@ -37,7 +37,7 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
|
||||
### Breadcrumb.Separator
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| -------- | ---------------- | --------- | ------- | ------- |
|
||||
| children | Custom separator | ReactNode | `/` | |
|
||||
|
||||
> When using `Breadcrumb.Separator`,its parent component must be set to `separator=""`, otherwise the default separator of the parent component will appear.
|
||||
|
||||
@ -38,7 +38,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
|
||||
### Breadcrumb.Separator
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| -------- | -------------- | --------- | ------ | ---- |
|
||||
| children | 要显示的分隔符 | ReactNode | `/` | |
|
||||
|
||||
> 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。
|
||||
|
||||
@ -204,7 +204,7 @@ Some operator functions in render form of Form.List.
|
||||
New in 4.7.0. Show error messages, should only work with `rules` of Form.List. See [example](#components-form-demo-dynamic-form-item).
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| -------- | ----------- | ------------ | ------- |
|
||||
| errors | Error list | ReactNode\[] | - |
|
||||
|
||||
## Form.Provider
|
||||
@ -287,7 +287,7 @@ validateFields()
|
||||
#### FieldData
|
||||
|
||||
| Name | Description | Type |
|
||||
| --- | --- | --- |
|
||||
| ---------- | ------------------------ | ------------------------ |
|
||||
| errors | Error messages | string\[] |
|
||||
| name | Field name path | [NamePath](#NamePath)\[] |
|
||||
| touched | Whether is operated | boolean |
|
||||
|
||||
@ -196,7 +196,7 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到
|
||||
Form.List 渲染表单相关操作函数。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| ------ | ---------- | -------------------------------------------------- | ------------------ |
|
||||
| add | 新增表单项 | (defaultValue?: any, insertIndex?: number) => void | insertIndex: 4.6.0 |
|
||||
| move | 移动表单项 | (from: number, to: number) => void | - |
|
||||
| remove | 删除表单项 | (index: number \| number\[]) => void | number\[]: 4.5.0 |
|
||||
@ -206,7 +206,7 @@ Form.List 渲染表单相关操作函数。
|
||||
4.7.0 新增。错误展示组件，仅限配合 Form.List 的 rules 一同使用。参考[示例](#components-form-demo-dynamic-form-item)。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| ------ | -------- | ------------ | ------ |
|
||||
| errors | 错误列表 | ReactNode\[] | - |
|
||||
|
||||
## Form.Provider
|
||||
@ -289,7 +289,7 @@ validateFields()
|
||||
#### FieldData
|
||||
|
||||
| 名称 | 说明 | 类型 |
|
||||
| --- | --- | --- |
|
||||
| ---------- | ---------------- | ------------------------ |
|
||||
| errors | 错误信息 | string\[] |
|
||||
| name | 字段名称 | [NamePath](#NamePath)\[] |
|
||||
| touched | 是否被用户操作过 | boolean |
|
||||
|
||||
@ -127,7 +127,7 @@ browserHistory.listen(() => {
|
||||
|
||||
### Modal.useModal()
|
||||
|
||||
当你需要使用 Context 时，可以通过 `Modal.useModal` 创建一个 `contextHolder` 插入子节点中。通过 hooks 创建的临时 Modal 将会得到 `contextHolder` 所在位置的所有上下文。创建的 `modal` 对象拥有与 [`Modal.method`](#Modal.method()) 相同的创建通知方法。
|
||||
当你需要使用 Context 时，可以通过 `Modal.useModal` 创建一个 `contextHolder` 插入子节点中。通过 hooks 创建的临时 Modal 将会得到 `contextHolder` 所在位置的所有上下文。创建的 `modal` 对象拥有与 [`Modal.method`](<#Modal.method()>) 相同的创建通知方法。
|
||||
|
||||
```jsx
|
||||
const [modal, contextHolder] = Modal.useModal();
|
||||
|
||||
@ -148,7 +148,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
|
||||
### ColumnGroup
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| -------- | ------------------------- | --------- | ------- |
|
||||
| title | Title of the column group | ReactNode | - |
|
||||
|
||||
### pagination
|
||||
@ -300,3 +300,7 @@ In order to improve user experience, Pagination show size changer by default whe
|
||||
### Why Table fully render when state change?
|
||||
|
||||
Table can not tell what state used in `columns.render`, so it always need fully render to avoid sync issue. You can use `column.shouldCellUpdate` to control render.
|
||||
|
||||
### How to handle fixed column display over the mask layout?
|
||||
|
||||
Fixed column use `z-index` to make it over other columns. You will find sometime fixed columns also over your mask layout. You can set `z-index` on your mask layout to resolve.
|
||||
|
||||
@ -155,7 +155,7 @@ const columns = [
|
||||
### ColumnGroup
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| ----- | ------------ | --------- | ------ |
|
||||
| title | 列头显示文字 | ReactNode | - |
|
||||
|
||||
### pagination
|
||||
@ -221,7 +221,7 @@ const columns = [
|
||||
### selection
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| -------- | -------------------------- | --------------------------- | ------ |
|
||||
| key | React 需要的 key，建议设置 | string | - |
|
||||
| text | 选择项显示的文字 | ReactNode | - |
|
||||
| onSelect | 选择项点击回调 | function(changeableRowKeys) | - |
|
||||
@ -305,3 +305,7 @@ Table 移除了在 v3 中废弃的 `onRowClick`、`onRowDoubleClick`、`onRowMou
|
||||
### 为什么 更新 state 会导致全表渲染？
|
||||
|
||||
由于 `columns` 支持 `render` 方法，因而 Table 无法知道哪些单元会受到影响。你可以通过 `column.shouldCellUpdate` 来控制单元格的渲染。
|
||||
|
||||
### 固定列穿透到最上层该怎么办？
|
||||
|
||||
固定列通过 `z-index` 属性将其悬浮于非固定列之上，这使得有时候你会发现在 Table 上放置遮罩层时固定列会被透过的情况。为遮罩层设置更高的 `z-index` 覆盖住固定列即可。
|
||||
|
||||
@ -21,7 +21,6 @@
|
||||
.@{table-prefix-cls} {
|
||||
.reset-component;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
font-size: @table-font-size;
|
||||
background: @table-bg;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
@ -97,7 +97,7 @@ Before `3.4.0`: The number of treeNodes can be very large, but when `checkable=t
|
||||
### Tree Methods
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| ----------------- | ------------------------------------ |
|
||||
| scrollTo({ key }) | Scroll to key item in virtual scroll |
|
||||
|
||||
## FAQ
|
||||
|
||||
@ -98,7 +98,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
|
||||
### Tree 方法
|
||||
|
||||
| 名称 | 说明 |
|
||||
| --- | --- |
|
||||
| ----------------- | ------------------------------- |
|
||||
| scrollTo({ key }) | 虚拟滚动下，滚动到指定 key 条目 |
|
||||
|
||||
## FAQ
|
||||
|
||||
@ -46,8 +46,7 @@ Following the Ant Design specification, we developed a React UI library `antd` t
|
||||
|
||||
Polyfills are needed for IE browsers. We recommend [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) for it. You can set `targets` config if you are using [umi](http://umijs.org/).
|
||||
|
||||
> We drop support of IE8 after `antd@2.0`,
|
||||
> We drop support of React 15 and IE9/10 after `antd@4.0`,
|
||||
> We drop support of IE8 after `antd@2.0`, We drop support of React 15 and IE9/10 after `antd@4.0`,
|
||||
|
||||
## Version
|
||||
|
||||
|
||||
@ -46,8 +46,7 @@ title: Ant Design of React
|
||||
|
||||
对于 IE 系列浏览器，需要提供相应的 Polyfill 支持，建议使用 [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) 来解决浏览器兼容问题。如果你在使用 [umi](http://umijs.org/)，可以直接使用 [targets](https://umijs.org/zh/config/#targets) 配置。
|
||||
|
||||
> `antd@2.0` 之后不再支持 IE8。
|
||||
> `antd@4.0` 之后不再支持 React 15 和 IE9/10。
|
||||
> `antd@2.0` 之后不再支持 IE8。 `antd@4.0` 之后不再支持 React 15 和 IE9/10。
|
||||
|
||||
## 版本
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user