卡片标签页：功能多多的el-card结合el-tabs，定制属于你的标签页卡片

2023-11-15 19:18:01

el-card与el-tabs联袂：打造功能多样的标签页卡片

在Vue应用开发中，el-card和el-tabs组件的结合可以为开发者带来强大的功能和灵活的定制选项，助力打造出功能多样的标签页卡片。

el-card与el-tabs的完美融合

el-card组件提供了一个干净且现代化的卡片容器，而el-tabs组件则提供了方便且高效的标签页切换功能。当这两个组件结合使用时，可以创建出功能强大的标签页卡片，继承el-tabs的强大功能，并支持自定义组件，实现个性化的标签页设计。

使用方式

使用el-card和el-tabs创建标签页卡片非常简单。只需将el-tabs组件嵌入到el-card组件中，并传入v-model属性和slots属性即可自动生成导航。

<el-card>
  <el-tabs v-model="activeName">
    <el-tab-pane label="选项卡一" name="first">内容一</el-tab-pane>
    <el-tab-pane label="选项卡二" name="second">内容二</el-tab-pane>
  </el-tabs>
</el-card>

自定义组件

el-card和el-tabs的结合还支持自定义组件。开发者可以在el-tab-pane组件中使用slot="template"，自定义标签页的内容，实现个性化的标签页设计。

<el-card>
  <el-tabs v-model="activeName">
    <el-tab-pane label="选项卡一" name="first">
      <template slot="template">
        <div>自定义内容一</div>
      </template>
    </el-tab-pane>
    <el-tab-pane label="选项卡二" name="second">
      <template slot="template">
        <div>自定义内容二</div>
      </template>
    </el-tab-pane>
  </el-tabs>
</el-card>