p96170835
/
amis
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

优化 Table 固顶列和内容列宽度有小额偏差问题

This commit is contained in:
liaoxuezhi 2019-05-27 20:06:36 +08:00
parent 53639cd977
commit 4700bd4452
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/renderers/Table.tsx
View File

@ -463,11 +463,11 @@ export default class Table extends React.Component<TableProps, object> {
} = (this.heights = {}); } = (this.heights = {});
forEach(table.querySelectorAll('thead>tr:last-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('data-index') as string] = item.offsetWidth; widths[item.getAttribute('data-index') as string] = item.clientWidth;
}); });
forEach( forEach(
table.querySelectorAll('tbody>tr>*:first-child'), table.querySelectorAll('tbody>tr>*:first-child'),
(item: HTMLElement, index: number) => (heights[index] = item.offsetHeight) (item: HTMLElement, index: number) => (heights[index] = item.clientHeight)
); );
// 让 react 去更新非常慢，还是手动更新吧。 // 让 react 去更新非常慢，还是手动更新吧。
@ -492,7 +492,8 @@ export default class Table extends React.Component<TableProps, object> {
), ),
table => { table => {
forEach(table.querySelectorAll('thead>tr:last-child>th'), (item: HTMLElement) => { forEach(table.querySelectorAll('thead>tr:last-child>th'), (item: HTMLElement) => {
item.style.cssText += `width: ${this.widths[parseInt(item.getAttribute('data-index') as string, 10)]}px`; // todo 这个 2 数值，应该从 dom 上读取，也有可能没有border 样式
item.style.cssText += `width: ${this.widths[parseInt(item.getAttribute('data-index') as string, 10)] - 2}px`;
}); });
forEach(table.querySelectorAll('tbody>tr'), (item: HTMLElement, index) => { forEach(table.querySelectorAll('tbody>tr'), (item: HTMLElement, index) => {