朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 882efc66cc72138a1ae0c81ec076a8d23ab2e5aa 1 个父辈 eda65f9c

界面增加tab处理

内嵌 并排对比
正在显示 4 个修改的文件 包含 88 行增加 和 110 行删除
<template>
<el-tabs v-model="activeIndex"
v-if="openTab.length"
type="card"
:closable = "tabCloseable"
@tab-click='tabClick'
@tab-remove="tabRemove"
style="width: 100%;margin-top: 18px;height: 50px">
<el-tab-pane
v-for="(item, index) in this.$store.state.openTab"
:key="item.name"
:label="item.name"
:name="item.route">
<div style="width: 100%">
<Assembly></Assembly>
<el-tabs v-model="activeIndex"
v-if="openTab.length"
type="card"
:closable = "tabCloseable"
@tab-click='tabClick'
@tab-remove="tabRemove"
style="width: 100%;margin-top: 18px;height: 50px">
<el-tab-pane
v-for="(item, index) in this.$store.state.openTab"
:key="item.name"
:label="item.name"
:name="item.route">
</el-tab-pane>
<section class="content-container">
<div class="grid-content bg-purple-light">
<!-- <el-col :span="24" class="breadcrumb-container">-->
... ... @@ -28,13 +33,16 @@
</el-col>
</div>
</section>
</el-tab-pane>
</el-tabs>
</el-tabs>
</div>
</template>
<script>
import Assembly from "@/views/bus/Assembly";
export default {
name: 'TabMenu',
components: { Assembly },
data() {
return {
tabCloseable: true
... ... @@ -75,10 +83,11 @@
// console.log('=============',this.$store.state.openTab[this.$store.state.openTab.length-1].route)
this.$store.commit('set_active_index', this.$store.state.openTab[this.$store.state.openTab.length-1].route);
this.$router.push({path: this.$store.state.activeIndex});
this.tabCloseable = false;
} else {
this.$router.push({path: '/main'});
}
}
},
},
... ... @@ -109,6 +118,9 @@
this.$store.commit('set_active_index', to.path);
}
},
openTab(){
this.openTab.length === 1 ? this.tabCloseable=false :this.tabCloseable = true;
}
},
computed:{
... ...
<template>
<div id="me">
<div id="menu">
<el-row id="me">
<el-col :span="12"> 1&nbsp;</el-col>
<el-col :span="12" id="menu">
<ul>
<li> <a href="" class="drop">企业公共服务</a>
<div class="dropdown_1column">
... ... @@ -43,9 +44,8 @@
</div></li>
</ul>
</div>
</div>
</el-col>
</el-row>
</template>
... ...
... ... @@ -155,49 +155,7 @@
value: 2
}
],
message_type: [{
id: 1,
name: '航班动态（1）',
children: [{
id: 7,
name: '',
children: [{
id: 8,
name: ''
}, {
id: 9,
name: ''
}]
}]
}, {
id: 2,
name: '航班历史（2）',
children: [{
id: 7,
name: '',
children: [{
id: 8,
name: ''
}, {
id: 9,
name: ''
}]
}]
}, {
id: 3,
name: '卡口业务交换信息（80）',
children: [{
id: 4,
name: '卡口业务数据（KAKO）',
children: [{
id: 5,
name: 'ALL'
}, {
id: 6,
name: '卡口车单绑定关系数据（CARB）'
}]
}]
}],
message_type: [],
defaultProps: {
children: 'children',
label: function (data,node) {
... ...
... ... @@ -35,54 +35,62 @@
</el-col>
</el-row>
<el-row>
<el-table
:data="umb_queryData.tableData"
border size="small"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}"
style="border-radius: 10px 10px 0px 0px;line-height: 25px;">
<el-table-column
prop="sndr"
label="帐户名称"
>
</el-table-column>
<el-table-column
prop="btype"
label="消息大类"
>
</el-table-column>
<el-table-column
prop="stype"
label="消息子类"
>
</el-table-column>
<el-table-column
prop="rcvr_topic"
label="订阅主题"
>
<template slot-scope="scope">
<div v-for="reciver in scope.row.rcvrList">
{{reciver.rcvrTopic}}<!--,{{reciver.filterList.filter}}-->
<!-- <div v-for="filters in reciver.filterList">{{filters.filter}}</div>-->
</div>
</template>
</el-table-column>
<el-table-column
prop="filter"
label="过滤规则"
>
<template slot-scope="scope">
<div v-for="reciver in scope.row.rcvrList">
<!-- {{reciver.rcvrTopic}},{{reciver.filterList.filter}}-->
<div v-for="filters in reciver.filterList">{{reciver.rcvrTopic}}:[{{filters.filter}}]</div>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="145px" align="center" fixed="right">
<template slot-scope="scope">
<el-col :span="24">
<el-table
:data="umb_queryData.tableData"
border size="small"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}"
style="border-radius: 10px 10px 0px 0px;line-height: 25px;">
<el-table-column
prop="sndr"
label="帐户名称"
width="200"
>
</el-table-column>
<el-table-column
prop="btype"
label="消息大类"
width="100"
>
</el-table-column>
<el-table-column
prop="stype"
label="消息子类"
width="100"
>
</el-table-column>
<el-table-column
prop="rcvr_topic"
label="订阅主题"
width="150"
>
<template slot-scope="scope">
<div v-for="reciver in scope.row.rcvrList">
{{reciver.rcvrTopic}}<!--,{{reciver.filterList.filter}}-->
<!-- <div v-for="filters in reciver.filterList">{{filters.filter}}</div>-->
</div>
</template>
</el-table-column>
<el-table-column
prop="filter"
label="过滤规则"
width="350"
>
<template slot-scope="scope">
<div v-for="reciver in scope.row.rcvrList">
<!-- {{reciver.rcvrTopic}},{{reciver.filterList.filter}}-->
<div v-for="filters in reciver.filterList">[{{reciver.rcvrTopic}}]:{{filters.filter}}</div>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="150" align="center" fixed="right">
<template slot-scope="scope">
<el-button type="danger" size="mini" @click="delRouter(scope.$index,scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<el-row>
<div class="block">
... ...