标签页组件，分隔内容上有关联但属于不同类别的数据集合。

基础用法

ETabs 组件需配合 ETabPane 进行使用，通过 v-model 进行绑定和初始化赋值。

<template>
  <EBlock class="e-tabs-showcase">
    <EBlock style="width: 100%; border: 1px solid #ddd;">
      <ETabs v-model="tabValue">
        <ETabPane name="tab1" label="用户管理">
          --用户内容--
        </ETabPane>
        <ETabPane name="tab2" label="配置管理">
          --配置内容--
        </ETabPane>
        <ETabPane name="tab3" label="角色管理">
          --角色内容--
        </ETabPane>
      </ETabs>
    </EBlock>
    <EBlock>当前选择：{{tabValue}}</EBlock>
  </EBlock>
</template>
<script>
export default {
  data() {
    return {
      tabValue: 'tab2',
    };
  },
};
</script>

卡片模式

设置 type 属性为 card，则显示卡片样式，默认为下横杠模式。

<template>
  <EBlock class="e-tabs-showcase">
    <EBlock style="width: 100%; border: 1px solid #ddd;">
      <ETabs v-model="tabValue" type="card">
        <ETabPane name="tab1" label="用户管理">
          --用户内容--
        </ETabPane>
        <ETabPane name="tab2" label="配置管理">
          --配置内容--
        </ETabPane>
        <ETabPane name="tab3" label="角色管理">
          --角色内容--
        </ETabPane>
      </ETabs>
    </EBlock>
  </EBlock>
</template>
<script>
export default {
  data() {
    return {
      tabValue: 'tab2',
    };
  },
};
</script>

增加可操作按钮

通过设置具名 slot 为 buttons 可在 ETabs 组件的右侧增加自定义能力，通常会放一些可操作按钮。

<template>
  <EBlock class="e-tabs-showcase">
    <EBlock style="width: 100%; border: 1px solid #ddd;">
      <ETabs v-model="tabValue">
        <template slot="buttons">
          <EIcon
            name="plus-circle"
            font-size="18px"
            style="margin: 0 4px;"
            @click.stop="handleAdd" />
        </template>
        <ETabPane
          v-for="item in tabList"
          :name="item.name"
          :label="item.label">
            {{item.content}}
        </ETabPane>
      </ETabs>
    </EBlock>
  </EBlock>
</template>
<script>
export default {
  data() {
    return {
      tabValue: 'tab1',
      tabIndex: 2,
      tabList: [
        {
          name: 'tab1',
          label: '用户管理',
          content: '--用户内容--',
        },
        {
          name: 'tab2',
          label: '配置管理',
          content: '--配置内容--',
        },
      ],
    };
  },
  methods: {
    handleAdd() {
      this.tabIndex++;
      this.tabList.push({
        name: `new-${this.tabIndex}`,
        label: `new-${this.tabIndex}`,
        content: `new-${this.tabIndex}`,
      });
      this.tab1 = `new1-${this.tabIndex}`;
    },
  },
};
</script>

自定义 label

ETabPane 组件提供具名 slot 自定义 label 的内容，比如要添加删除按钮来删除 tab。

<template>
  <EBlock class="e-tabs-showcase">
    <EBlock style="width: 100%; border: 1px solid #ddd;">
      <ETabs v-model="tabValue">
        <ETabPane
          v-for="item in tabList"
          :key="item.name"
          :name="item.name">
            <template slot="label">
              {{ item.label }}
              <EIcon name="times-circle" style="margin-left: 4px;" @click.stop="handleRemove(item)" />
            </template>
            {{item.content}}
        </ETabPane>
      </ETabs>
    </EBlock>
  </EBlock>
</template>
<script>
export default {
  data() {
    return {
      tabValue: 'tab1',
      tabIndex: 2,
      tabList: [
        {
          name: 'tab1',
          label: '用户管理',
          content: '--用户内容--',
        },
        {
          name: 'tab2',
          label: '配置管理',
          content: '--配置内容--',
        },
      ],
    };
  },
  methods: {
    handleRemove(item) {
      const index = this.tabList.findIndex(t => t.name === item.name);
      this.tabList.splice(index, 1);
      this.tabValue = this.tabList[0].name;
    },
  },
};
</script>

注意点

ETabs 在切换 tab 时不会销毁 ETabPane，ETabPane 的加载方式默认为全部加载，通过给 ETabPane 设置 lazy 属性来实现懒加载功能。懒加载时，未切换到的 ETabPane 不会被加载。

ETabs

Props

Name	Description	Type	Required	Default
value	-	String	true	-
type	风格，basic 基础风格（下划线）、card 卡片风格（高亮）	String	false	basic

Events

Event Name	Description	Parameters
input	-	-

Slots

Name	Description	Default Slot Content
label	-	-
default	-	-
buttons	-	-

ETabPane

Props

Name	Description	Type	Required	Default
name	-	String	true	-
label	-	String	false	-
lazy	-	Boolean	false	-

Slots

Name	Description	Default Slot Content
default	-	-