element-ui/examples/docs/tabs.md

基础使用

选项卡一内容 选项卡二内容 选项卡三内容 选项卡四内容

<el-tabs :active-key="activeKey">
  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
  <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
</el-tabs>

标签风格

选项卡一内容 选项卡二内容 选项卡三内容 选项卡四内容

<el-tabs type="card">
  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
  <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
</el-tabs>

可关闭的标签

选项卡一内容 选项卡二内容 选项卡三内容 选项卡四内容

{{activeKey2}} ```html 选项卡一内容 选项卡二内容 选项卡三内容 选项卡四内容 ``` ## 卡片风格

选项卡一内容 选项卡二内容 选项卡三内容 选项卡四内容

<el-tabs type="border-card">
  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
  <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
</el-tabs>

TABS API

参数	说明	类型	可选值	默认值
type	风格类型	string	card, border-card
closable	真实值	boolean	true, false	false
defaultActiveKey	如果没有设置 activeKey, 则使用该值	string		第一个面板
activeKey	当前选中面板的key	string
tab.click	tab 被点击的回调	string
tab.remove	tab 被删除的回调	string

TAB-PANE API

参数	说明	类型	可选值	默认值
label	选项卡标题	string
key	与选项卡activeKey对应的标识符	string		该选项卡在选项卡中的index值，如第一个选项卡则为'1'