需求：
在列表頁贱田，展示表格缅茉，通過點(diǎn)擊右上角的新增，在打開一個(gè)tabs頁男摧，是新增蔬墩；
在列表頁表格的操作列表點(diǎn)擊詳情，再打開一個(gè)tabs頁耗拓，是詳情拇颅；
在列表頁表格的操作列表點(diǎn)擊編輯，再打開一個(gè)tabs頁乔询，是編輯樟插；
在新增頁面，最下面有編輯按鈕
每個(gè)打開的頁面都有關(guān)閉按鈕
以上的需求竿刁，element ui的標(biāo)簽頁的功能可以滿足
但是el-tabls 在v-for里面只支持字符串
index.vue 主頁面
<div class="oneBlock">
<div class="searchCondition" style="display: none">
<el-row :gutter="10" class="elRow">
<el-col :span="3" class="labelLeft">名稱:</el-col>
<el-col :span="5">
<el-input size="mini" placeholder="請(qǐng)輸入" v-model="a" clearable=""></el-input>
</el-col>
<el-col :span="8">
<div class="textAlignRight">
<el-button size="mini" type="primary" class=" " icon="el-icon-search" @click="query">查詢</el-button>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="oneBlock">
<el-tabs v-model="editableTabsValue" @tab-remove="removeTab">
<el-tab-pane
v-for="item in editableTabs"
:closable="item.close"
:key="item.name"
:label="item.title"
:name="item.name">
<component v-bind:is="item.content" ref="child" @toFu = goAddTab @toFuClose = closeZi></component>
</el-tab-pane>
</el-tabs>
</div>
list.vue 表格頁
<div class="oneBlock">
<el-row :gutter="10" class="elRow">
<el-col :span="24">
<div class="textAlignRight" style="margin-bottom: 20px">
<el-button size="mini" @click="addSite">新增</el-button>
</div>
</el-col>
</el-row>
<div class="elTable">
<el-table
ref="tableInsData.multipleTable"
v-loading="tableInsData.tableLoading"
:data="tableInsData.tableData"
tooltip-effect="light"
stripe
style="width: 100%">
<el-table-column :show-overflow-tooltip="true" align="center" prop="" min-width="130px" label="編號(hào)">
<template slot-scope="scope">
<div class="opera" @click="handleDetails(scope.row.id)">{{}}</div>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" align="center" prop="" min-width="180px" label="名稱"></el-table-column>
<el-table-column :show-overflow-tooltip="true" align="center" fixed="right" min-width="160px" label="操作" >
<template slot-scope="scope">
<el-button type="text" class="" size="small" @click="tableEditInfo(scope.row.id)" >編輯</el-button>
<el-button type="text" class="" size="small" @click="tableDelInfo(scope.row.id)" >刪除</el-button>
</template>
</el-table-column>
</el-table>
<div class="elPagination" v-if="tableInsData.tableData.length !== 0" style="margin-top: 50px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="tableInsData.currentPage"
:page-sizes="tableInsData.pageSizes"
:page-size="tableInsData.pageSize"
layout="total, ->,prev, pager, next, sizes, jumper"
:total="tableInsData.pageTotal">
</el-pagination>
</div>
</div>
edit.vue 編輯頁,新增頁,詳情頁 通過父組件傳過來的字段flag確定
<div class="searchCondition">
<el-row :gutter="10" class="elRow">
<p class="title">基礎(chǔ)信息</p>
</el-row>
<el-row :gutter="10" class="elRow">
<el-col :span="5" class="labelLeft must">編碼:</el-col>
<el-col :span="5">
<p class="details" v-if="flag !== 'add'">{{form.code}}</p>
<el-input size="mini" v-else placeholder="請(qǐng)輸入" v-model="form.code" @blur="checkIsCode"></el-input>
</el-col>
</el-row>
<el-row :gutter="10" class="elRow" style="text-align: center">
<el-button type="primary" size="mini" @click="edit" v-show="flag === 'details'">編輯</el-button>
<el-button type="primary" size="mini" @click="close">關(guān)閉</el-button>
<el-button type="primary" size="mini" v-show="flag !== 'details'" @click="save" :loading="isLoading">保存</el-button>
</el-row>
</div>
具體里面的邏輯不涉及黄锤，主要分析一下場(chǎng)景交互
一、index.vue頁循環(huán)需要展示的tabs標(biāo)簽頁
editableTabsValue: '1',
editableTabs: [{
title: '電子圍欄',
name: '1',
content: 'tableList'
}],
tabIndex: 1,
數(shù)組默認(rèn)首先展示的是列表頁食拜，并且列表頁永遠(yuǎn)在第一頁鸵熟，且沒有關(guān)閉按鈕
二、list.vue頁在點(diǎn)新增按鈕的時(shí)候负甸，需要向父組件發(fā)送
addSite () {
this.$emit('toFu', {
next: 'add',
id: 'empty'
})
},
三流强、index.vue需要接收數(shù)據(jù)判斷，并且向子組件edit.vue發(fā)送信息惑惶，告訴對(duì)方
當(dāng)前是add/edit/details煮盼，這是第幾個(gè)打開的窗口(因?yàn)槊總€(gè)頁面自帶關(guān)閉按鈕短纵，需要這個(gè)數(shù)字)带污，id(詳情頁和編輯頁需要這個(gè)id去調(diào)接口)
goAddTab (info) {
if (info.next === 'add') {
this.addTab(this.editableTabsValue, '新建', info.next, info.id)
} else if (info.next === 'edit') {
this.addTab(this.editableTabsValue, '編輯', info.next, info.id)
} else if (info.next === 'details') {
this.addTab(this.editableTabsValue, '查看', info.next, info.id)
}
},
addTab (targetName, title, opera, data) {
let newTabName = ++this.tabIndex + ''
this.editableTabs.push({
title,
name: newTabName,
content: 'edit',
close: 'closable'
})
this.editableTabsValue = newTabName
this.$nextTick(function () {
this.$refs.child[this.$refs.child.length - 1].toEdit(opera, newTabName, data)
})
},
四、edit頁需要接收數(shù)據(jù) 如果不是新增頁就需要調(diào)接口 flag接收的是edit/add/details
time接收的是當(dāng)前是第幾頁香到，id接收的是詳情頁調(diào)接口需要的參數(shù)
toEdit (message, time, id) {
this.flag = message
this.time = time
this.id = id
if (this.id !== 'empty') {
this.getList()
}
},
注：每次新增或者修改的保存調(diào)用接口成功的時(shí)候鱼冀，需要向list.vue列表組件發(fā)送一個(gè)消息，告訴它消息更新了悠就，需要刷新列表千绪，，可以使用
bus.$emit('refresh', '1')
bus.$on('refresh', (message) => {
if (message === '1') {
this.loadTableData(1, 10)
}
})
五梗脾、在edit.vue里面點(diǎn)擊關(guān)閉按鈕的時(shí)候荸型，需要把當(dāng)前的頁面位置告訴index.vue
this.$emit('toFuClose', {
times: this.time
})
// index.vue
closeZi (info) {
this.removeTab(info.times)
},
removeTab (targetName) {
let tabs = this.editableTabs
let activeName = this.editableTabsValue
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1]
if (nextTab) {
activeName = nextTab.name
}
}
})
}
this.editableTabsValue = activeName
this.editableTabs = tabs.filter(tab => tab.name !== targetName)
},
六、最后還有一個(gè)就是index.vue頁點(diǎn)查詢按鈕的時(shí)候炸茧，需要發(fā)送給list.vue同時(shí)不管此時(shí)在哪個(gè)頁面都跳回第一個(gè)頁面列表頁
query () {
// this.$refs.child[0].toList(this.teamName, this.teamLeaderName)
this.$refs.child[0].toList(這里面寫需要查詢的字段)
this.editableTabsValue = '1'
}
// list.vue
toList (這里接收傳過來的查詢條件) {
this.loadTableData(1, 10)
},
