朱兆平 / vue_cli · 提交

转到一个项目

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

界面增加tab处理

内嵌 并排对比
正在显示 4 个修改的文件 包含 88 行增加 和 110 行删除
1 <template> 1 <template>
2 - <el-tabs v-model="activeIndex"  
3 - v-if="openTab.length"  
4 - type="card"  
5 - :closable = "tabCloseable"  
6 - @tab-click='tabClick'  
7 - @tab-remove="tabRemove"  
8 - style="width: 100%;margin-top: 18px;height: 50px">  
9 - <el-tab-pane  
10 - v-for="(item, index) in this.$store.state.openTab"  
11 - :key="item.name"  
12 - :label="item.name"  
13 - :name="item.route"> 2 + <div style="width: 100%">
  3 +
  4 + <Assembly></Assembly>
  5 +
  6 + <el-tabs v-model="activeIndex"
  7 + v-if="openTab.length"
  8 + type="card"
  9 + :closable = "tabCloseable"
  10 + @tab-click='tabClick'
  11 + @tab-remove="tabRemove"
  12 + style="width: 100%;margin-top: 18px;height: 50px">
  13 + <el-tab-pane
  14 + v-for="(item, index) in this.$store.state.openTab"
  15 + :key="item.name"
  16 + :label="item.name"
  17 + :name="item.route">
  18 + </el-tab-pane>
14 <section class="content-container"> 19 <section class="content-container">
15 <div class="grid-content bg-purple-light"> 20 <div class="grid-content bg-purple-light">
16 <!-- <el-col :span="24" class="breadcrumb-container">--> 21 <!-- <el-col :span="24" class="breadcrumb-container">-->
@@ -28,13 +33,16 @@ @@ -28,13 +33,16 @@
28 </el-col> 33 </el-col>
29 </div> 34 </div>
30 </section> 35 </section>
31 - </el-tab-pane>  
32 - </el-tabs> 36 + </el-tabs>
  37 + </div>
33 </template> 38 </template>
34 39
35 <script> 40 <script>
  41 + import Assembly from "@/views/bus/Assembly";
  42 +
36 export default { 43 export default {
37 name: 'TabMenu', 44 name: 'TabMenu',
  45 + components: { Assembly },
38 data() { 46 data() {
39 return { 47 return {
40 tabCloseable: true 48 tabCloseable: true
@@ -75,10 +83,11 @@ @@ -75,10 +83,11 @@
75 // console.log('=============',this.$store.state.openTab[this.$store.state.openTab.length-1].route) 83 // console.log('=============',this.$store.state.openTab[this.$store.state.openTab.length-1].route)
76 this.$store.commit('set_active_index', this.$store.state.openTab[this.$store.state.openTab.length-1].route); 84 this.$store.commit('set_active_index', this.$store.state.openTab[this.$store.state.openTab.length-1].route);
77 this.$router.push({path: this.$store.state.activeIndex}); 85 this.$router.push({path: this.$store.state.activeIndex});
78 - this.tabCloseable = false;  
79 } else { 86 } else {
80 this.$router.push({path: '/main'}); 87 this.$router.push({path: '/main'});
81 } 88 }
  89 +
  90 +
82 } 91 }
83 }, 92 },
84 }, 93 },
@@ -109,6 +118,9 @@ @@ -109,6 +118,9 @@
109 this.$store.commit('set_active_index', to.path); 118 this.$store.commit('set_active_index', to.path);
110 } 119 }
111 120
  121 + },
  122 + openTab(){
  123 + this.openTab.length === 1 ? this.tabCloseable=false :this.tabCloseable = true;
112 } 124 }
113 }, 125 },
114 computed:{ 126 computed:{
1 <template> 1 <template>
2 - <div id="me">  
3 - <div id="menu"> 2 + <el-row id="me">
  3 + <el-col :span="12"> 1&nbsp;</el-col>
  4 + <el-col :span="12" id="menu">
4 <ul> 5 <ul>
5 <li> <a href="" class="drop">企业公共服务</a> 6 <li> <a href="" class="drop">企业公共服务</a>
6 <div class="dropdown_1column"> 7 <div class="dropdown_1column">
@@ -43,9 +44,8 @@ @@ -43,9 +44,8 @@
43 </div></li> 44 </div></li>
44 45
45 </ul> 46 </ul>
46 - </div>  
47 -  
48 - </div> 47 + </el-col>
  48 + </el-row>
49 49
50 </template> 50 </template>
51 51
@@ -155,49 +155,7 @@ @@ -155,49 +155,7 @@
155 value: 2 155 value: 2
156 } 156 }
157 ], 157 ],
158 - message_type: [{  
159 - id: 1,  
160 - name: '航班动态（1）',  
161 - children: [{  
162 - id: 7,  
163 - name: '',  
164 - children: [{  
165 - id: 8,  
166 - name: ''  
167 - }, {  
168 - id: 9,  
169 - name: ''  
170 - }]  
171 - }]  
172 - }, {  
173 - id: 2,  
174 - name: '航班历史（2）',  
175 - children: [{  
176 - id: 7,  
177 - name: '',  
178 - children: [{  
179 - id: 8,  
180 - name: ''  
181 - }, {  
182 - id: 9,  
183 - name: ''  
184 - }]  
185 - }]  
186 - }, {  
187 - id: 3,  
188 - name: '卡口业务交换信息（80）',  
189 - children: [{  
190 - id: 4,  
191 - name: '卡口业务数据（KAKO）',  
192 - children: [{  
193 - id: 5,  
194 - name: 'ALL'  
195 - }, {  
196 - id: 6,  
197 - name: '卡口车单绑定关系数据（CARB）'  
198 - }]  
199 - }]  
200 - }], 158 + message_type: [],
201 defaultProps: { 159 defaultProps: {
202 children: 'children', 160 children: 'children',
203 label: function (data,node) { 161 label: function (data,node) {
@@ -35,54 +35,62 @@ @@ -35,54 +35,62 @@
35 </el-col> 35 </el-col>
36 </el-row> 36 </el-row>
37 <el-row> 37 <el-row>
38 - <el-table  
39 - :data="umb_queryData.tableData"  
40 - border size="small"  
41 - :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}"  
42 - style="border-radius: 10px 10px 0px 0px;line-height: 25px;">  
43 - <el-table-column  
44 - prop="sndr"  
45 - label="帐户名称"  
46 - >  
47 - </el-table-column>  
48 - <el-table-column  
49 - prop="btype"  
50 - label="消息大类"  
51 - >  
52 - </el-table-column>  
53 - <el-table-column  
54 - prop="stype"  
55 - label="消息子类"  
56 - >  
57 - </el-table-column>  
58 - <el-table-column  
59 - prop="rcvr_topic"  
60 - label="订阅主题"  
61 - >  
62 - <template slot-scope="scope">  
63 - <div v-for="reciver in scope.row.rcvrList">  
64 - {{reciver.rcvrTopic}}<!--,{{reciver.filterList.filter}}-->  
65 - <!-- <div v-for="filters in reciver.filterList">{{filters.filter}}</div>-->  
66 - </div>  
67 - </template>  
68 - </el-table-column>  
69 - <el-table-column  
70 - prop="filter"  
71 - label="过滤规则"  
72 - >  
73 - <template slot-scope="scope">  
74 - <div v-for="reciver in scope.row.rcvrList">  
75 - <!-- {{reciver.rcvrTopic}},{{reciver.filterList.filter}}-->  
76 - <div v-for="filters in reciver.filterList">{{reciver.rcvrTopic}}:[{{filters.filter}}]</div>  
77 - </div>  
78 - </template>  
79 - </el-table-column>  
80 - <el-table-column label="操作" width="145px" align="center" fixed="right">  
81 - <template slot-scope="scope"> 38 + <el-col :span="24">
  39 + <el-table
  40 + :data="umb_queryData.tableData"
  41 + border size="small"
  42 + :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}"
  43 + style="border-radius: 10px 10px 0px 0px;line-height: 25px;">
  44 + <el-table-column
  45 + prop="sndr"
  46 + label="帐户名称"
  47 + width="200"
  48 + >
  49 + </el-table-column>
  50 + <el-table-column
  51 + prop="btype"
  52 + label="消息大类"
  53 + width="100"
  54 + >
  55 + </el-table-column>
  56 + <el-table-column
  57 + prop="stype"
  58 + label="消息子类"
  59 + width="100"
  60 + >
  61 + </el-table-column>
  62 + <el-table-column
  63 + prop="rcvr_topic"
  64 + label="订阅主题"
  65 + width="150"
  66 + >
  67 + <template slot-scope="scope">
  68 + <div v-for="reciver in scope.row.rcvrList">
  69 + {{reciver.rcvrTopic}}<!--,{{reciver.filterList.filter}}-->
  70 + <!-- <div v-for="filters in reciver.filterList">{{filters.filter}}</div>-->
  71 + </div>
  72 + </template>
  73 + </el-table-column>
  74 + <el-table-column
  75 + prop="filter"
  76 + label="过滤规则"
  77 + width="350"
  78 + >
  79 + <template slot-scope="scope">
  80 + <div v-for="reciver in scope.row.rcvrList">
  81 + <!-- {{reciver.rcvrTopic}},{{reciver.filterList.filter}}-->
  82 + <div v-for="filters in reciver.filterList">[{{reciver.rcvrTopic}}]:{{filters.filter}}</div>
  83 + </div>
  84 + </template>
  85 + </el-table-column>
  86 + <el-table-column label="操作" width="150" align="center" fixed="right">
  87 + <template slot-scope="scope">
82 <el-button type="danger" size="mini" @click="delRouter(scope.$index,scope.row)">删除</el-button> 88 <el-button type="danger" size="mini" @click="delRouter(scope.$index,scope.row)">删除</el-button>
83 - </template>  
84 - </el-table-column>  
85 - </el-table> 89 + </template>
  90 + </el-table-column>
  91 + </el-table>
  92 + </el-col>
  93 +
86 </el-row> 94 </el-row>
87 <el-row> 95 <el-row>
88 <div class="block"> 96 <div class="block">