需求：
在列表页，展示表格，通过点击右上角的新增，在打开一个tabs页，是新增；
在列表页表格的操作列表点击详情，再打开一个tabs页，是详情；
在列表页表格的操作列表点击编辑，再打开一个tabs页，是编辑；
在新增页面，最下面有编辑按钮
每个打开的页面都有关闭按钮
以上的需求，element ui的标签页的功能可以满足
但是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="请输入" 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="编号">
<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">基础信息</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="请输入" 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">关闭</el-button>
<el-button type="primary" size="mini" v-show="flag !== 'details'" @click="save" :loading="isLoading">保存</el-button>
</el-row>
</div>
具体里面的逻辑不涉及，主要分析一下场景交互
一、index.vue页循环需要展示的tabs标签页
editableTabsValue: '1',
editableTabs: [{
title: '电子围栏',
name: '1',
content: 'tableList'
}],
tabIndex: 1,
数组默认首先展示的是列表页，并且列表页永远在第一页，且没有关闭按钮
二、list.vue页在点新增按钮的时候，需要向父组件发送
addSite () {
this.$emit('toFu', {
next: 'add',
id: 'empty'
})
},
三、index.vue需要接收数据判断，并且向子组件edit.vue发送信息，告诉对方
当前是add/edit/details，这是第几个打开的窗口(因为每个页面自带关闭按钮，需要这个数字)，id(详情页和编辑页需要这个id去调接口)
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页需要接收数据 如果不是新增页就需要调接口 flag接收的是edit/add/details
time接收的是当前是第几页，id接收的是详情页调接口需要的参数
toEdit (message, time, id) {
this.flag = message
this.time = time
this.id = id
if (this.id !== 'empty') {
this.getList()
}
},
注：每次新增或者修改的保存调用接口成功的时候，需要向list.vue列表组件发送一个消息，告诉它消息更新了，需要刷新列表，，可以使用
bus.$emit('refresh', '1')
bus.$on('refresh', (message) => {
if (message === '1') {
this.loadTableData(1, 10)
}
})
五、在edit.vue里面点击关闭按钮的时候，需要把当前的页面位置告诉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)
},
六、最后还有一个就是index.vue页点查询按钮的时候，需要发送给list.vue同时不管此时在哪个页面都跳回第一个页面列表页
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)
},
网友评论