test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-07 22:39:48 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

修复 table 表头分组后, 固定状态宽度如内容不一致问题

Browse Source
This commit is contained in:
liaoxuezhi 2019-05-27 19:29:59 +08:00
parent 8307cfef18
commit 666526389a
2 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/renderers/Table.tsx
View File

@ -461,9 +461,9 @@ export default class Table extends React.Component<TableProps, object> {
let heights: { let heights: {
[propName: string]: number; [propName: string]: number;
} = (this.heights = {}); } = (this.heights = {});
forEach(table.querySelectorAll('thead>tr:first-child>th'), (item: HTMLElement) => { forEach(table.querySelectorAll('thead>tr:last-child>th'), (item: HTMLElement) => {
heights.header || (heights.header = item.offsetHeight); heights.header || (heights.header = item.offsetHeight);
widths[item.getAttribute('index') as string] = item.offsetWidth; widths[item.getAttribute('data-index') as string] = item.offsetWidth;
}); });
forEach( forEach(
table.querySelectorAll('tbody>tr>*:first-child'), table.querySelectorAll('tbody>tr>*:first-child'),
@ -491,8 +491,8 @@ export default class Table extends React.Component<TableProps, object> {
`.${ns}Table-fixedTop table, .${ns}Table-fixedLeft table, .${ns}Table-fixedRight table` `.${ns}Table-fixedTop table, .${ns}Table-fixedLeft table, .${ns}Table-fixedRight table`
), ),
table => { table => {
forEach(table.querySelectorAll('thead>tr>th'), (item: HTMLElement) => { forEach(table.querySelectorAll('thead>tr:last-child>th'), (item: HTMLElement) => {
item.style.cssText = `width: ${this.widths[parseInt(item.getAttribute('index') as string, 10)]}px`; item.style.cssText = `width: ${this.widths[parseInt(item.getAttribute('data-index') as string, 10)]}px`;
}); });
forEach(table.querySelectorAll('tbody>tr'), (item: HTMLElement, index) => { forEach(table.querySelectorAll('tbody>tr'), (item: HTMLElement, index) => {
@ -899,7 +899,7 @@ export default class Table extends React.Component<TableProps, object> {
{store.columnGroup.length ? ( {store.columnGroup.length ? (
<tr> <tr>
{store.columnGroup.map((item, index) => ( {store.columnGroup.map((item, index) => (
<th key={index} colSpan={item.colSpan}>{item.label}</th> <th key={index} data-index={item.index} colSpan={item.colSpan}>{item.label}</th>
))} ))}
</tr> </tr>
) : null} ) : null}
@ -907,7 +907,7 @@ export default class Table extends React.Component<TableProps, object> {
{store.filteredColumns.map(column => {store.filteredColumns.map(column =>
this.renderHeadCell(column, { this.renderHeadCell(column, {
key: column.index, key: column.index,
index: column.index, 'data-index': column.index,
}) })
)} )}
</tr> </tr>
@ -938,7 +938,7 @@ export default class Table extends React.Component<TableProps, object> {
{store.columnGroup.length ? ( {store.columnGroup.length ? (
<tr> <tr>
{store.columnGroup.map((item, index) => ( {store.columnGroup.map((item, index) => (
<th key={index} colSpan={item.colSpan}>{item.label}</th> <th key={index} data-index={item.index} colSpan={item.colSpan}>{item.label}</th>
))} ))}
</tr> </tr>
) : null} ) : null}
@ -946,7 +946,7 @@ export default class Table extends React.Component<TableProps, object> {
{columns.map(column => {columns.map(column =>
this.renderHeadCell(column, { this.renderHeadCell(column, {
key: column.index, key: column.index,
index: column.index, 'data-index': column.index,
}) })
)} )}
</tr> </tr>
@ -1358,14 +1358,14 @@ export default class Table extends React.Component<TableProps, object> {
{store.columnGroup.length ? ( {store.columnGroup.length ? (
<tr> <tr>
{store.columnGroup.map((item, index) => ( {store.columnGroup.map((item, index) => (
<th key={index} colSpan={item.colSpan}>{item.label}</th> <th key={index} data-index={item.index} colSpan={item.colSpan}>{item.label}</th>
))} ))}
</tr> </tr>
) : null} ) : null}
<tr> <tr>
{store.filteredColumns.map(column => {store.filteredColumns.map(column =>
this.renderHeadCell(column, { this.renderHeadCell(column, {
index: column.index, 'data-index': column.index,
key: column.index, key: column.index,
}) })
)} )}

8
src/store/table.ts
View File

@ -255,6 +255,7 @@ export const TableStore = iRendererStore
function getColumnGroup():Array<{ function getColumnGroup():Array<{
label: string, label: string,
index: number,
colSpan: number colSpan: number
}> { }> {
const columsn = getFilteredColumns(); const columsn = getFilteredColumns();
@ -266,11 +267,13 @@ export const TableStore = iRendererStore
const result:Array<{ const result:Array<{
label: string, label: string,
index: number,
colSpan: number colSpan: number
}> = [ }> = [
{ {
label: columsn[0].groupName, label: columsn[0].groupName,
colSpan: 1 colSpan: 1,
index: columsn[0].index
} }
]; ];
@ -288,7 +291,8 @@ export const TableStore = iRendererStore
} else { } else {
result.push({ result.push({
label: current.groupName, label: current.groupName,
colSpan: 1 colSpan: 1,
index: current.index
}); });
} }
} }