el-tabs和el-tab-pane的联合使用

<template>
  <FaPageMain>
    <el-tabs v-model="activeTab" type="card">
      <el-tab-pane label="功德" name="merit">
        <query-form v-model="query" :loading="loading" enterSubmit @enter="actionSearch" ref="queryFormRef" />
        <management-table v-model="tableData" v-model:page="pagerQuery.page" v-model:pageSize="pagerQuery.pageSize"
          :loading="loading" @pagerChange="actionFetchTableData" />
      </el-tab-pane>
      <el-tab-pane label="订单" name="order"></el-tab-pane>
    </el-tabs>
  </FaPageMain>
</template>

el-tabs和el-tab-pane的联合使用

el-tabs可以理解为导航栏列表，而el-tab-pane则是列表里的每个标签栏，name对应着它的标识，而v-model="activeTab"是对应的绑定值，我这里的默认是第一个功德，所以是这样写。

// 新增标签状态
const activeTab = ref('merit');

如果想要切换的话，可以点击对应的订单，这时候"activeTab"会切换成order，就自动跳到另外的页签了。