分隔内容上有关联但属于不同类别的数据集合。
基础用法
基础的、简洁的标签页。
Tabs 组件提供了选项卡功能,默认选中第一个标签页,你也可以通过 value
属性来指定当前选中的标签页。
1 <template> 2 <el-tabs v-model="activeName" @tab-click="handleClick"> 3 <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> 4 <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> 5 <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane> 6 <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> 7 </el-tabs> 8 </template> 9 <script> 10 export default { 11 data() { 12 return { 13 activeName: 'second' 14 }; 15 }, 16 methods: { 17 handleClick(tab, event) { 18 console.log(tab, event); 19 } 20 } 21 }; 22 </script>
选项卡样式
选项卡样式的标签页。
只需要设置 type
属性为 card
就可以使选项卡改变为标签风格。
1 <template> 2 <el-tabs v-model="activeName2" type="card" @tab-click="handleClick"> 3 <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> 4 <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> 5 <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane> 6 <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> 7 </el-tabs> 8 </template> 9 <script> 10 export default { 11 data() { 12 return { 13 activeName2: 'first' 14 }; 15 }, 16 methods: { 17 handleClick(tab, event) { 18 console.log(tab, event); 19 } 20 } 21 }; 22 </script>
卡片化
卡片化的标签页。
将type
设置为border-card
。
1 <el-tabs type="border-card"> 2 <el-tab-pane label="用户管理">用户管理</el-tab-pane> 3 <el-tab-pane label="配置管理">配置管理</el-tab-pane> 4 <el-tab-pane label="角色管理">角色管理</el-tab-pane> 5 <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> 6 </el-tabs>
位置
可以通过 tab-position
设置标签的位置
自定义标签页
可以通过具名 slot
来实现自定义标签页的内容
1 <el-tabs type="border-card"> 2 <el-tab-pane> 3 <span slot="label"><i class="el-icon-date"></i> 我的行程</span> 4 我的行程 5 </el-tab-pane> 6 <el-tab-pane label="消息中心">消息中心</el-tab-pane> 7 <el-tab-pane label="角色管理">角色管理</el-tab-pane> 8 <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> 9 </el-tabs>
动态增减标签页
增减标签页按钮只能在选项卡样式的标签页下使用
1 <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit"> 2 <el-tab-pane 3 :key="item.name" 4 v-for="(item, index) in editableTabs" 5 :label="item.title" 6 :name="item.name" 7 > 8 {{item.content}} 9 </el-tab-pane> 10 </el-tabs> 11 <script> 12 export default { 13 data() { 14 return { 15 editableTabsValue: '2', 16 editableTabs: [{ 17 title: 'Tab 1', 18 name: '1', 19 content: 'Tab 1 content' 20 }, { 21 title: 'Tab 2', 22 name: '2', 23 content: 'Tab 2 content' 24 }], 25 tabIndex: 2 26 } 27 }, 28 methods: { 29 handleTabsEdit(targetName, action) { 30 if (action === 'add') { 31 let newTabName = ++this.tabIndex + ''; 32 this.editableTabs.push({ 33 title: 'New Tab', 34 name: newTabName, 35 content: 'New Tab content' 36 }); 37 this.editableTabsValue = newTabName; 38 } 39 if (action === 'remove') { 40 let tabs = this.editableTabs; 41 let activeName = this.editableTabsValue; 42 if (activeName === targetName) { 43 tabs.forEach((tab, index) => { 44 if (tab.name === targetName) { 45 let nextTab = tabs[index + 1] || tabs[index - 1]; 46 if (nextTab) { 47 activeName = nextTab.name; 48 } 49 } 50 }); 51 } 52 53 this.editableTabsValue = activeName; 54 this.editableTabs = tabs.filter(tab => tab.name !== targetName); 55 } 56 } 57 } 58 } 59 </script>
自定义增加标签页触发器
1 <div style="margin-bottom: 20px;"> 2 <el-button 3 size="small" 4 @click="addTab(editableTabsValue2)" 5 > 6 add tab 7 </el-button> 8 </div> 9 <el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab"> 10 <el-tab-pane 11 v-for="(item, index) in editableTabs2" 12 :key="item.name" 13 :label="item.title" 14 :name="item.name" 15 > 16 {{item.content}} 17 </el-tab-pane> 18 </el-tabs> 19 <script> 20 export default { 21 data() { 22 return { 23 editableTabsValue2: '2', 24 editableTabs2: [{ 25 title: 'Tab 1', 26 name: '1', 27 content: 'Tab 1 content' 28 }, { 29 title: 'Tab 2', 30 name: '2', 31 content: 'Tab 2 content' 32 }], 33 tabIndex: 2 34 } 35 }, 36 methods: { 37 addTab(targetName) { 38 let newTabName = ++this.tabIndex + ''; 39 this.editableTabs2.push({ 40 title: 'New Tab', 41 name: newTabName, 42 content: 'New Tab content' 43 }); 44 this.editableTabsValue2 = newTabName; 45 }, 46 removeTab(targetName) { 47 let tabs = this.editableTabs2; 48 let activeName = this.editableTabsValue2; 49 if (activeName === targetName) { 50 tabs.forEach((tab, index) => { 51 if (tab.name === targetName) { 52 let nextTab = tabs[index + 1] || tabs[index - 1]; 53 if (nextTab) { 54 activeName = nextTab.name; 55 } 56 } 57 }); 58 } 59 60 this.editableTabsValue2 = activeName; 61 this.editableTabs2 = tabs.filter(tab => tab.name !== targetName); 62 } 63 } 64 } 65 </script>
Tabs Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | 风格类型 | string | card/border-card | — |
closable | 标签是否可关闭 | boolean | — | false |
addable | 标签是否可增加 | boolean | — | false |
editable | 标签是否同时可增加和关闭 | boolean | — | false |
value | 绑定值,选中选项卡的 name | string | — | 第一个选项卡的 name |
tab-position | 选项卡所在位置 | string | top/right/bottom/left | top |
Tabs Events
事件名称 | 说明 | 回调参数 |
---|---|---|
tab-click | tab 被选中时触发 | 被选中的标签 tab 实例 |
tab-remove | 点击 tab 移除按钮后触发 | 被删除的标签的 name |
tab-add | 点击 tabs 的新增按钮后触发 | — |
edit | 点击 tabs 的新增按钮或 tab 被关闭后触发 | (targetName, action) |
Tab-pane Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | 选项卡标题 | string | — | — |
disabled | 是否禁用 | boolean | — | false |
name | 与选项卡 activeName 对应的标识符,表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值,如第一个选项卡则为'1' |
closable | 标签是否可关闭 | boolean | — | false |