Vue3 + Element Plus中el-table加载状态分析

在 Vue 3 中，当 onMounted 钩子被触发时，父组件的 DOM 已经挂载完成，但子组件（如 el-table）可能尚未完成其内部渲染。具体分析如下：

1. onMounted 的执行时机

• 父组件挂载完成：onMounted 表示当前组件自身的 DOM 已被创建并插入到父容器中。

• 不保证子组件渲染：子组件（尤其是包含复杂逻辑或异步操作的组件）可能仍在初始化过程中，此时直接操作子组件的 DOM 或方法可能失败。

2. el-table 的特殊性

• 内部异步渲染：el-table 组件在首次渲染时可能需要计算列宽、行高等布局信息，这些操作可能是异步的。

• 依赖数据驱动：如果 el-table 的数据 (data) 是通过异步 API 获取的，则表格的实际渲染会延迟到数据到达之后。

3. 如何确保 el-table 渲染完成？

方案一：使用 nextTick（简单操作）

javascript

复制

下载

import { onMounted, nextTick } from 'vue';

onMounted(() => {
  nextTick(() => {
    // 此时 DOM 已更新，适合操作 el-table 的根元素
    const tableEl = document.querySelector('.el-table');
    console.log(tableEl); // 可访问到表格容器
  });
});

方案二：结合数据加载状态（适用于异步数据）

javascript

复制

下载

import { onMounted, watch } from 'vue';

// 假设 tableData 从 API 异步获取
const tableData = ref([]);

// 监听数据变化并等待渲染
watch(tableData, () => {
  nextTick(() => {
    console.log('数据更新且表格已重新渲染');
  });
});

onMounted(() => {
  fetchData().then(data => tableData.value = data);
});

4. 验证表格渲染状态的方法

javascript

复制

下载

// 检查表格是否存在滚动条（间接判断内容渲染）
const isTableRendered = () => {
  const tableWrapper = document.querySelector('.el-table__body-wrapper');
  return tableWrapper.scrollHeight > tableWrapper.clientHeight;
};

总结