elementUI NavMenu怎样切换页面上的表格

如图,tab1和tab2下面分别有两个不同的表格,怎样通过NavMenu切换两个表格
微信截图_20200511165157.png

<template>
  <div class="resignation">
      <div class="clearfix">
        <el-menu :default-active="activeIndex" active-text-color="#1890ff" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">tab1</el-menu-item>
            <el-menu-item index="2">tab2</el-menu-item>
        </el-menu>
      </div>
      <div class="correct-wait">
        <el-table
            class="waitTable"
            size="small"
            :data="tableData.records"
            :key="tableKey"
            @selection-change="onSelectChange"
            @sort-change="sortChange"
            border
            fit
            ref="table"
            style="width: 100%;"
            v-loading="loading"
        >
            <el-table-column align="center" type="selection" width="55px" />
            <el-table-column align="center" label="表格1" type="index" width="70"></el-table-column>
        </el-table>
        <el-table
            class="waitTable"
            size="small"
            :data="tableData.records"
            :key="tableKey"
            @selection-change="onSelectChange"
            @sort-change="sortChange"
            border
            fit
            ref="table"
            style="width: 100%;"
            v-loading="loading"
        >
            <el-table-column align="center" type="selection" width="55px" />
            <el-table-column align="center" label="表格2" type="index" width="70"></el-table-column>
        </el-table>
      </div>
  </div>
</template>
阅读 2.5k
1 个回答

<el-tabs> 更符合需求。如果是非要用 <el-menu> 那么在 handleSelect 回调中有 index 可以判断当前是那个。

image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题