mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 19:19:57 +08:00
afc163
偏右
parent
02da860de1
commit
d9f2c906ca
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 27
|
||||
order: 100
|
||||
title:
|
||||
en-US: Dynamic Settings
|
||||
zh-CN: 动态控制表格属性
|
||||
|
||||
84
components/table/demo/ellipsis.md
Normal file
84
components/table/demo/ellipsis.md
Normal file
@ -0,0 +1,84 @@
|
||||
---
|
||||
order: 27
|
||||
title:
|
||||
en-US: ellipsis column
|
||||
zh-CN: 单元格自动省略
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
设置 `column.ellipsis` 可以让单元格内容根据宽度自动省略。
|
||||
|
||||
## en-US
|
||||
|
||||
Ellipsize cell content via setting `column.ellipsis`.
|
||||
|
||||
```jsx
|
||||
import { Table, Divider, Tag } from 'antd';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
render: text => <a>{text}</a>,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
key: 'address 1',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: 'Long Column Long Column Long Column',
|
||||
dataIndex: 'address',
|
||||
key: 'address 2',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: 'Long Column Long Column',
|
||||
dataIndex: 'address',
|
||||
key: 'address 3',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: 'Long Column',
|
||||
dataIndex: 'address',
|
||||
key: 'address 4',
|
||||
ellipsis: true,
|
||||
},
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
|
||||
tags: ['nice', 'developer'],
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
age: 42,
|
||||
address: 'London No. 2 Lake Park, London No. 2 Lake Park',
|
||||
tags: ['loser'],
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'Joe Black',
|
||||
age: 32,
|
||||
address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
|
||||
tags: ['cool', 'teacher'],
|
||||
},
|
||||
];
|
||||
|
||||
ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);
|
||||
```
|
||||
@ -99,6 +99,7 @@ class App extends React.Component {
|
||||
onFilter: (value, record) => record.name.includes(value),
|
||||
sorter: (a, b) => a.name.length - b.name.length,
|
||||
sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
@ -106,6 +107,7 @@ class App extends React.Component {
|
||||
key: 'age',
|
||||
sorter: (a, b) => a.age - b.age,
|
||||
sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
@ -116,6 +118,7 @@ class App extends React.Component {
|
||||
onFilter: (value, record) => record.address.includes(value),
|
||||
sorter: (a, b) => a.address.length - b.address.length,
|
||||
sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
|
||||
ellipsis: true,
|
||||
},
|
||||
];
|
||||
return (
|
||||
|
||||
@ -7,11 +7,11 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
集成 react-resizable 来实现可伸缩列。
|
||||
集成 [react-resizable](https://github.com/STRML/react-resizable) 来实现可伸缩列。
|
||||
|
||||
## en-US
|
||||
|
||||
Implement resizable column by integrate with react-resizable.
|
||||
Implement resizable column by integrate with [react-resizable](https://github.com/STRML/react-resizable).
|
||||
|
||||
```jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
@ -59,7 +59,7 @@ const columns = [
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| tableLayout | [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute of table element | 'auto' \| 'fixed' | 'auto', `fixed` when header or columns are fixed` | 3.24.0 |
|
||||
| tableLayout | [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute of table element | 'auto' \| 'fixed' | 'auto'<br /><br />`fixed` when header/columns are fixed, or using `column.ellipsis` | 3.24.0 |
|
||||
| bordered | Whether to show all table borders | boolean | `false` | |
|
||||
| childrenColumnName | The column contains children to display | string\[] | children | 3.4.2 |
|
||||
| columns | Columns of table | [ColumnProps](https://git.io/vMMXC)\[] | - | |
|
||||
@ -120,6 +120,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| align | specify which way that column is aligned | 'left' \| 'right' \| 'center' | 'left' | 3.3.2 |
|
||||
| ellipsis | ellipsize cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is true. | boolean | false | 3.24.0 |
|
||||
| className | className of this column | string | - | |
|
||||
| colSpan | Span of this column's title | number | | |
|
||||
| dataIndex | Display field of the data record, could be set like `a.b.c`, `a[0].b.c[1]` | string | - | |
|
||||
|
||||
@ -64,7 +64,7 @@ const columns = [
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| tableLayout | 表格元素的 [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) 属性，设为 `fixed` 表示内容不会影响列的布局 | 'auto' \| 'fixed' | 'auto'，当固定头或固定列时默认值为 `fixed` | 3.24.0 |
|
||||
| tableLayout | 表格元素的 [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) 属性，设为 `fixed` 表示内容不会影响列的布局 | 'auto' \| 'fixed' | 'auto'<br /><br />固定表头/列或使用了 `column.ellipsis` 时，默认值为 `fixed` | 3.24.0 |
|
||||
| bordered | 是否展示外边框和列边框 | boolean | false | |
|
||||
| childrenColumnName | 指定树形结构的列名 | string\[] | children | 3.4.2 |
|
||||
| columns | 表格列的配置描述，具体项见下表 | [ColumnProps](https://git.io/vMMXC)\[] | - | |
|
||||
@ -125,6 +125,7 @@ const columns = [
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| align | 设置列的对齐方式 | 'left' \| 'right' \| 'center' | 'left' | 3.3.2 |
|
||||
| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `true` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean | false | 3.24.0 |
|
||||
| className | 列样式类名 | string | - | |
|
||||
| colSpan | 表头列合并,设置为 0 时，不渲染 | number | | |
|
||||
| dataIndex | 列数据在数据项中对应的 key，支持 `a.b.c`、`a[0].b.c[1]` 的嵌套写法 | string | - | |
|
||||
|
||||
@ -33,6 +33,7 @@ export interface ColumnProps<T> {
|
||||
dataIndex?: string; // Note: We can not use generic type here, since we need to support nested key, see #9393
|
||||
render?: (text: any, record: T, index: number) => React.ReactNode;
|
||||
align?: 'left' | 'right' | 'center';
|
||||
ellipsis?: boolean;
|
||||
filters?: ColumnFilterItem[];
|
||||
onFilter?: (value: any, record: T) => boolean;
|
||||
filterMultiple?: boolean;
|
||||
|
||||
@ -173,6 +173,7 @@
|
||||
|
||||
.@{table-prefix-cls}-header-column {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
vertical-align: top;
|
||||
|
||||
.@{table-prefix-cls}-column-sorters {
|
||||
@ -584,6 +585,17 @@
|
||||
content: '.';
|
||||
}
|
||||
}
|
||||
|
||||
&-cell-ellipsis,
|
||||
&-cell-ellipsis .@{table-prefix-cls}-column-title {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&-cell-ellipsis .@{table-prefix-cls}-column-title {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
tr&-expanded-row {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user