-
Element-ui 动态tabs实战
先梳理一下需求，原先的页面逻辑如下：
在一个大的页面中改动一个子组件
一列数据，点击后跳出一个子页面覆盖了父页面，里面使用到的是Vuex的目录调用，项目经理希望通过优化页面达到，element-ui 动态tabs的效果，如图所示：
这种第一个页面不允许删除，其余点击后tab自动增加，还需要具备一个一键删除其他页面的功能。
我们先看看原代码的逻辑结构：
在主页面DataRetrieval.vue中：
- <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.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>