Element-ui 动态tabs实战

先梳理一下需求，原先的页面逻辑如下：

在一个大的页面中改动一个子组件 

一列数据，点击后跳出一个子页面覆盖了父页面，里面使用到的是Vuex的目录调用，项目经理希望通过优化页面达到，element-ui 动态tabs的效果，如图所示：

 这种第一个页面不允许删除，其余点击后tab自动增加，还需要具备一个一键删除其他页面的功能。

我们先看看原代码的逻辑结构：

在主页面DataRetrieval.vue中：

<template>
    <el-container class="tydic-container-wrap flex-layout-parent flex-layout-child">
        <div v-loading="listLoading">
            <div v-for="(item, index) in tableInfoList" :key="item.tableId" class="dataRetrivalItem">
                <el-row class="itemRow">
                    <el-col :span="8"><el-button type="text" @click="modelDetailBtn(item.modelId, item.modelCode, item.modelDbName, item.modelName, item.isExistTable)">{
  {item.modelCode}}</el-button></el-col>
                    <el-col :span="8"><label>中文名称：</label>{
  {item.modelName}}</el-col>
                </el-row>
                <el-row class="itemRow">
                    <el-col :span="8"><label>类目：</label><span :title="item.modelCategory">{
  {item.modelCategory}}</span></el-col>
                    <!-- <el-col :span="8"><label>项目：</label><span :title="item.modelProjectId">{
  {projectNameFmt(item.modelProjectId)}}</span></el-col> -->
                    <el-col :span="8"><label>拥有者：</label><span :title="item.modelOwner">{
  {item.modelOwner}}</span></el-col>
                    <el-col :span="8"><label>最新更新时间：</label><span :title="item.modelUptdate">{
  {item.modelUptdate}}</span></el-col>
                </el-row>
                <el-row class="itemRow" >
                    <el-col :span="24" style="overflow:hidden;text-overflow:ellipsis;white-space:wrap"><label>描述：</label><span :title="item.modelDesc">{
  {item.modelDesc}}</span></el-col>
                </el-row>
            </div>
        </div>

    </el-container>
</template>

<script>

    const ModelDetail = resolve => require(['@/views/dataManager/dataRetrieval/ModelDetail'], resolve)

    export default {
        components: {
            // ModelD