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
  • 相关阅读:
    License for package Android SDK Build-Tools 28.0.3 not accepted
    React实现座位排布组件
    Flutter中Expanded组件用法
    Ant Design Pro路由传值
    Ant Design中getFieldDecorator方法的特殊用法(小bug)
    React子组件和父组件通信
    Ant Design Pro项目打开页设为登录或者其他页面
    JS中的splice方法
    Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法
    c++下标越界问题探讨
  • 原文地址:https://www.cnblogs.com/grt322/p/8564444.html
Copyright © 2011-2022 走看看