test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-03 12:38:53 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

style: 优化宽度同步 Close: #7664 (#7666)

Browse Source
This commit is contained in:
liaoxuezhi 2023-08-07 17:10:39 +08:00 committed by GitHub
parent 09bad81b65
commit 5d81e35f94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/amis/src/renderers/Table/index.tsx
View File

@ -1131,7 +1131,7 @@ export default class Table extends React.Component<TableProps, object> {
const cx = this.props.classnames; const cx = this.props.classnames;
const ths = ( const ths = (
[].slice.call( [].slice.call(
table.querySelectorAll('thead>tr>th[data-index]') table.querySelectorAll(':scope>thead>tr>th[data-index]')
) as HTMLTableCellElement[] ) as HTMLTableCellElement[]
).filter((th, index, arr) => { ).filter((th, index, arr) => {
return ( return (
@ -1141,6 +1141,7 @@ export default class Table extends React.Component<TableProps, object> {
) === index ) === index
); );
}); });
const tbodyTr = table.querySelector(':scope>tbody>tr:first-child');
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'amis-scope'; // jssdk 里面 css 会在这一层 div.className = 'amis-scope'; // jssdk 里面 css 会在这一层
@ -1154,31 +1155,43 @@ export default class Table extends React.Component<TableProps, object> {
'data-index' 'data-index'
)}" class="${th.className}">${th.innerHTML}</th>` )}" class="${th.className}">${th.innerHTML}</th>`
) )
.join('')}</tr></thead></table>`; .join('')}</tr></thead>${
tbodyTr ? `<tbody>${tbodyTr.outerHTML}</tbody>` : ''
}</table>`;
document.body.appendChild(div); document.body.appendChild(div);
const minWidths: { const minWidths: {
[propName: string]: number; [propName: string]: number;
} = {}; } = {};
[].slice [].slice
.call(div.querySelectorAll('th[data-index]')) .call(div.querySelectorAll(':scope>table>thead>tr>th[data-index]'))
.forEach((th: HTMLTableCellElement) => { .forEach((th: HTMLTableCellElement) => {
minWidths[th.getAttribute('data-index')!] = th.clientWidth; minWidths[th.getAttribute('data-index')!] = th.clientWidth;
}); });
document.body.removeChild(div); document.body.removeChild(div);
forEach(table.querySelectorAll('colgroup>col'), (col: HTMLElement) => { if (store.useFixedLayout) {
table.style.cssText += `table-layout:fixed;`;
ths.forEach(th => {
const index = parseInt(th.getAttribute('data-index')!, 10);
const column = store.columns[index];
th.style.cssText += `width:${
typeof column.pristine.width === 'number'
? column.pristine.width
: minWidths[index]
}px;`;
});
}
forEach(
table.querySelectorAll(':scope>colgroup>col'),
(col: HTMLElement) => {
const index = parseInt(col.getAttribute('data-index')!, 10); const index = parseInt(col.getAttribute('data-index')!, 10);
const column = store.columns[index]; const column = store.columns[index];
column.setWidth( column.setWidth(
Math.max( Math.max(col.clientWidth - 2, minWidths[index]),
typeof column.pristine.width === 'number'
? column.pristine.width
: col.clientWidth,
minWidths[index]
),
minWidths[index] minWidths[index]
); );
}); }
);
} }
} }
@ -1233,7 +1246,7 @@ export default class Table extends React.Component<TableProps, object> {
initDragging() { initDragging() {
const {store, classPrefix: ns} = this.props; const {store, classPrefix: ns} = this.props;
this.sortable = new Sortable( this.sortable = new Sortable(
(this.table as HTMLElement).querySelector('tbody') as HTMLElement, (this.table as HTMLElement).querySelector(':scope>tbody') as HTMLElement,
{ {
group: 'table', group: 'table',
animation: 150, animation: 150,
@ -1337,7 +1350,7 @@ export default class Table extends React.Component<TableProps, object> {
this.draggingSibling = siblings.map(item => { this.draggingSibling = siblings.map(item => {
let tr: HTMLTableRowElement = tbody.querySelector( let tr: HTMLTableRowElement = tbody.querySelector(
`tr[data-id="${item.id}"]` `:scope>tr[data-id="${item.id}"]`
) as HTMLTableRowElement; ) as HTMLTableRowElement;
tr.classList.add('is-drop-allowed'); tr.classList.add('is-drop-allowed');