我创建了一个函数来调整表中列的大小。
当我在页面之间导航时,它不会启动。
如果我刷新页面,多亏了SSR,它们会正确执行(因为dom完全是在javascript执行之前构建的)。
页面之间的导航并非如此。
<script setup>
const adjustTableColumnWidths = () => {
const tables = document.querySelectorAll('.prose table');
tables.forEach((table) => {
const totalWidth = table.offsetWidth;
const firstColWidth = totalWidth / 3;
const otherColWidth = (totalWidth - firstColWidth) / (table.rows[0].cells.length - 1);
Array.from(table.rows).forEach(row => {
const firstCell = row.cells[0];
if (firstCell) {
firstCell.style.width = `${firstColWidth}px`;
}
for (let i = 1; i < row.cells.length; i++) {
const cell = row.cells[i];
cell.style.width = `${otherColWidth}px`;
}
});
});
};
onMounted(async () => {
await nextTick();
adjustTableColumnWidths();
window.addEventListener('resize', adjustTableColumnWidths);
});
onUnmounted(() => {
window.removeEventListener('resize', adjustTableColumnWidths);
});
</script>