el-tab-pane加上loading

### 实现 `el-tab-pane` 组件中的 Loading 加载效果 为了在 `el-tab-pane` 中实现加载效果，可以利用 Vue 的条件渲染特性以及 Element UI 提供的 `Loading` 服务。具体做法是在每个 tab 切换时控制 loading 状态，并确保仅当数据请求完成后再显示表格内容。 #### 方法一：使用 `v-loading` 属性 通过给 `el-table` 或者整个 `el-tab-pane` 添加 `v-loading` 属性来展示加载动画： ```html <template> <el-tabs v-model="activeName"> <el-tab-pane label="Tab One" name="first"> <!-- 使用 v-loading 控制 --> <div :style="{ height: '300px' }" v-loading="loadingFirst"> <el-table :data="tableDataOne"></el-table> </div> </el-tab-pane> <el-tab-pane label="Tab Two" name="second"> <div :style="{ height: '300px' }" v-loading="loadingSecond"> <el-table :data="tableDataTwo"></el-table> </div> </el-tab-pane> </el-tabs> </template> <script> export default { data() { return { activeName: "first", tableDataOne: [], tableDataTwo: [], loadingFirst: true, loadingSecond: true }; }, watch: { activeName(newVal) { this.getDataByTab(newVal); } }, methods: { getDataByTab(tabName) { switch (tabName) { case "first": setTimeout(() => { // 模拟异步获取数据 this.tableDataOne = [...]; // 填充实际的数据 this.loadingFirst = false; }, 1000); break; case "second": setTimeout(() => { // 同样模拟异步操作 this.tableDataTwo = [...]; this.loadingSecond = false; }, 1000); break; default: console.error('Invalid Tab Name'); } } } }; </script> ``` 这种方法简单直观，适用于大多数场景下的需求[^1]。 #### 方法二：基于事件监听器的方式 如果希望更灵活地管理不同 tabs 下的内容更新逻辑，则可以在每次点击 tab 头部触发特定函数来进行数据刷新并开启/关闭对应的 loading 效果: ```javascript // 在 mounted 生命周期钩子里绑定 click 事件处理程序 mounted () { const tabBarNode = document.querySelector('.el-tabs__nav'); // 获取到所有的tabs头部节点 if (!tabBarNode) return ; tabBarNode.addEventListener('click', e => { let targetEl = e.target.closest('[role="tab"]'); while(targetEl && !targetEl.getAttribute('aria-controls')){ // 找到真实的tab元素 targetEl = targetEl.parentElement; } if(!targetEl || typeof this[targetEl.id + '_load'] !== 'function') return ; this[targetEl.id + '_load'](true); // 这里的延时是为了模拟网络延迟情况；真实环境中应替换为axios/fetch等API调用 setTimeout(() => { this[targetEl.id + '_load'](false); }, 2000); }); } ``` 此方式允许开发者针对每一个具体的 tab 定义独立的数据拉取行为和错误处理机制[^2].