zoukankan      html  css  js  c++  java

  • Tabs 标签页

    分隔内容上有关联但属于不同类别的数据集合。

    基础用法

    基础的、简洁的标签页。

    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>
    View Code

    选项卡样式

    选项卡样式的标签页。

    只需要设置 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>
    View Code

    卡片化

    卡片化的标签页。

    将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>
    View Code

    位置

    可以通过 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>
    View Code

    动态增减标签页

    增减标签页按钮只能在选项卡样式的标签页下使用

     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>
    View Code

    自定义增加标签页触发器

     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>
    View Code

    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
  • 相关阅读:
    hdu 2147博弈找规律
    hdu 1851 巴什博弈
    hdu 1729 sg博弈
    hdu 2516博弈找规律
    （转载）博弈之SG函数
    poj 2234基础Nim博弈||sg博弈
    hdu 1730 sg博弈||nim博弈
    hdu 1847 博弈找规律
    n hdu 1760 [SG博弈]二维状态
    hdu 1849 nim博弈
  • 原文地址：https://www.cnblogs.com/grt322/p/8564444.html
Copyright © 2011-2022 走看看