Ant Design Vue Tabs切换时重新渲染页面

在使用Tabs切换页面时,子页面created函数只执行一次,导致切换Tabs分页页数不初始化问题。

利用Tabs的destroyInactiveTabPane属性可摧毁隐藏的TabPane

<a-tabs default-active-key="1" :getContainer="()=>$refs.modal"  @change="tablsOnChange" destroyInactiveTabPane>
  <a-tab-pane key="2" tab="子组件2" force-render>
    <index-two></index-two>
  </a-tab-pane>
  <a-tab-pane key="3" tab="子组件3">
    <index-three></index-three>
  </a-tab-pane>
  <a-tab-pane key="4" tab="子组件4">
   <index-four></index-four>
  </a-tab-pane>
</a-tabs>

每次切换Tabs,子页面created都会执行一次。

### 关于 `a-tab-pane` 不可点击以及点击事件失效解决方案 当遇到 Ant Design Vue 中的 `a-tab-pane` 不可点击或点击事件失效的情况,可以从以下几个方面排查并解决问题。 #### 1. 检查 Tab 切换逻辑 确保在 `<a-tabs>` 标签内正确绑定了 `v-model` 或者 `default-active-key` 属性来控制当前激活的标签页。如果希望监听切换行为,则应该添加 `@change="callback"` 来响应用户的交互操作[^1]: ```html <a-tabs v-model="activeKey" @change="handleTabChange"> <!-- 子组件 --> </a-tabs> ``` #### 2. 确认 Key 值类型一致性 对于每一个 `<a-tab-pane>` 节点来说,其 `key` 属性应当被赋予字符串类型的值而非数值型。这是因为即使两者看起来相同,在 JavaScript 中它们属于不同的数据类型,这可能导致匹配失败从而影响正常的渲染流程[^3]: ```html <!-- 错误示范 --> <a-tab-pane key={0}>...</a-tab-pane> <!-- 正确做法 --> <a-tab-pane :key="'tab-0'">...</a-tab-pane> ``` #### 3. 强制重新渲染子组件 有由于某些原因(比如异步加载内容),可能会导致子组件未能及更新状态。此可以尝试给父级容器增加唯一的 `key` 属性以便强制刷新整个区域内的 DOM 结构[^4]: ```html <div :key="uniqueIdentifier"> <a-tabs ... > ... </a-tabs> </div> ``` 其中 `uniqueIdentifier` 可以是一个基于间戳或者其他唯一标识符生成的新变量。 #### 4. 使用 `force-render` 属性 如果存在延迟初始化或其他生命周期管理上的问题,可以在特定场景下考虑使用 `force-render` 参数让所有面板都保持挂载状态而不是按需懒加载。不过需要注意的是这种方法会牺牲一定的性能优化效果[^2]: ```html <a-tab-pane force-render>...</a-tab-pane> ``` 以上措施能够有效改善大多数情况下 `a-tab-pane` 的可用性和用户体验。当然具体实施还需要根据实际项目环境和个人需求灵活调整策略。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值