element/examples/docs/tabs.md

基础使用

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

<el-tabs :active-name="activeName">
  <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>

可关闭的标签

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

{{activeName2}}

<el-tabs type="card" :closable="true" :on-remove="handleRemove" :on-click="handleClick">
  <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="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
activeName	当前选中面板的 name	string
on-click	tab 被点击的钩子	string
on-remove	tab 被删除的钩子	string

TAB-PANE API

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