用途:el-tabs 是 Element Plus 的标签页组件,用于把相关但属于不同类型的数据集合分栏展示。当用户需要创建标签页内容、动态增删标签、卡片或 border-card 样式标签、设置标签位置(上/左/右/下)、或切换前确认时调用本技能。
主要能力:支持默认、card、border-card 三种样式;tab-position 可设为 top、right、bottom、left;支持动态增删标签(closable、addable、editable);标签可自定义内容;tab-pane 支持 lazy 懒加载;提供 before-leave 切换前钩子。
使用方式:以 el-tabs 包裹 el-tab-pane,通过 v-model 绑定当前选中标签的 name,name 需与 tab-pane 的 name 一致。常用属性包括 type、closable、addable、editable、tab-position、stretch、before-leave、tabindex。事件有 tab-click、tab-change、tab-remove、tab-add、edit。插槽有 default 与 add-icon。el-tabs 暴露 currentName 与 tabNavRef。tab-pane 支持 label、disabled、name、closable、lazy 属性及 default、label 插槽。
适用场景:后台管理表单分栏、配置面板、动态多标签工作区、需要切换确认或懒加载重内容的界面。
限制与注意:左右位置标签需设置固定高度;动态内容建议在 tab-pane 上加 :key;标签切换异常时检查 v-model 值与 name 是否匹配;建议为每个 tab-pane 设置唯一 name,动态增删时使用 card 类型,重内容使用 lazy。本资料未提供收费、价格、平台与效果信息。