Vue实现一个这样的功能，两个按钮渲染，在同一个位置显示不同的表格出来，表格中还涉及到事件的点击

Question

这是图片:

父组件部分代码:

<template>
    <div class="t_teacher_box">
        <div class="t_teacher_header">
            <div class="t-teacher-bt">
                <el-button class="t_teacher_back" icon="el-icon-arrow-left" @click="backHome">返回</el-button>
            </div>
            <div class="t_teacher_detail">专注度详情</div>

            <div class="t_teacher_curriculum" @click="switchButton(0)">
                <div class="t_teacher_curriculum_list">
                    <span> 课程 </span>
                </div>
            </div>
            <div class="t_teacher_class" @click="switchButton(1)" >
                <div class="t_teacher_curriculum_list">
                    <span> 班级 </span>
                </div>
            </div>
        </div>
        <div class="t_teacher_search">
            <div class="t_teacher_search_box">
                <div class="t_teacher_search_select">
                    <span class="t_teacher_search_text">学期：</span>
                    <el-select v-model="value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="t_teacher_search_input">
                    <span class="t_teacher_search_text">关键字：</span>
                    <div class="t_teacher_search_input_detail">
                        <el-input v-model="keyword" placeholder="请输入"></el-input>
                    </div>
                </div>
                <div class="t_teacher_search_bt">
                    <el-button class="t_teacher_search_bt_f" @click="queryDetail">查询</el-button>
                </div>
                <div class="t_teacher_search_reset">
                    <el-button class="t_teacher_search_reset_r">重置</el-button>
                </div>
            </div>
        </div>
        <div class="t_teacher_table">
            <Curriculum v-show="ab" ref="tableRef" :table-columns="tableColumns"></Curriculum>
        </div>
    </div>
</template>

子组件：

<template>
    <!-- 班级 -->
    <div class="t_teacher_table" ref="tableList">
        <div class="t_teacher_table_detail">
            <div class="t_teacher_table_text">
                <span>详情列表</span>
            </div>
            <div class="t_teacher_table_list">
                <el-scrollbar style="height: 100%">
                    <el-table :data="pageData" style="width: 100%; background-color: transparent" size="26">
                        <el-table-column v-for="item in tableColumns" :props="item.props" :label="item.label"
                            :key="item.id" align="center" show-overflow-tooltip>
                        </el-table-column>
                       
                    </el-table>
                </el-scrollbar>
            </div>
            <div class="c_pager">
                <div class="c_pagerContainer">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        layout="total, prev, pager, next" :current-page="Pager.page" :page-size="Pager.pageCount"
                        :total="Pager.totalCount">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
    <div class="t_teacher_dialog">
        <el-dialog v-model="dialogVisible" width="60%" height="798px" @open="open()" :before-close="handleClose">
            <div id="charts" style="width: 1026px; height: 536px"></div>
        </el-dialog>
    </div>
</template>

Answer 1

动态组件，调用不同的文件

<component :is="currentTable"></component>