朱兆平 / vue_cli · 提交

转到一个项目

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

界面增加tab处理

内嵌 并排对比
正在显示 4 个修改的文件 包含 30 行增加 和 52 行删除
1 <template> 1 <template>
  2 + <div style="width: 100%">
  3 +
  4 + <Assembly></Assembly>
  5 +
2 <el-tabs v-model="activeIndex" 6 <el-tabs v-model="activeIndex"
3 v-if="openTab.length" 7 v-if="openTab.length"
4 type="card" 8 type="card"
@@ -11,6 +15,7 @@ @@ -11,6 +15,7 @@
11 :key="item.name" 15 :key="item.name"
12 :label="item.name" 16 :label="item.name"
13 :name="item.route"> 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,6 +35,7 @@ @@ -35,6 +35,7 @@
35 </el-col> 35 </el-col>
36 </el-row> 36 </el-row>
37 <el-row> 37 <el-row>
  38 + <el-col :span="24">
38 <el-table 39 <el-table
39 :data="umb_queryData.tableData" 40 :data="umb_queryData.tableData"
40 border size="small" 41 border size="small"
@@ -43,21 +44,25 @@ @@ -43,21 +44,25 @@
43 <el-table-column 44 <el-table-column
44 prop="sndr" 45 prop="sndr"
45 label="帐户名称" 46 label="帐户名称"
  47 + width="200"
46 > 48 >
47 </el-table-column> 49 </el-table-column>
48 <el-table-column 50 <el-table-column
49 prop="btype" 51 prop="btype"
50 label="消息大类" 52 label="消息大类"
  53 + width="100"
51 > 54 >
52 </el-table-column> 55 </el-table-column>
53 <el-table-column 56 <el-table-column
54 prop="stype" 57 prop="stype"
55 label="消息子类" 58 label="消息子类"
  59 + width="100"
56 > 60 >
57 </el-table-column> 61 </el-table-column>
58 <el-table-column 62 <el-table-column
59 prop="rcvr_topic" 63 prop="rcvr_topic"
60 label="订阅主题" 64 label="订阅主题"
  65 + width="150"
61 > 66 >
62 <template slot-scope="scope"> 67 <template slot-scope="scope">
63 <div v-for="reciver in scope.row.rcvrList"> 68 <div v-for="reciver in scope.row.rcvrList">
@@ -69,20 +74,23 @@ @@ -69,20 +74,23 @@
69 <el-table-column 74 <el-table-column
70 prop="filter" 75 prop="filter"
71 label="过滤规则" 76 label="过滤规则"
  77 + width="350"
72 > 78 >
73 <template slot-scope="scope"> 79 <template slot-scope="scope">
74 <div v-for="reciver in scope.row.rcvrList"> 80 <div v-for="reciver in scope.row.rcvrList">
75 <!-- {{reciver.rcvrTopic}},{{reciver.filterList.filter}}--> 81 <!-- {{reciver.rcvrTopic}},{{reciver.filterList.filter}}-->
76 - <div v-for="filters in reciver.filterList">{{reciver.rcvrTopic}}:[{{filters.filter}}]</div> 82 + <div v-for="filters in reciver.filterList">[{{reciver.rcvrTopic}}]:{{filters.filter}}</div>
77 </div> 83 </div>
78 </template> 84 </template>
79 </el-table-column> 85 </el-table-column>
80 - <el-table-column label="操作" width="145px" align="center" fixed="right"> 86 + <el-table-column label="操作" width="150" align="center" fixed="right">
81 <template slot-scope="scope"> 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> 89 </template>
84 </el-table-column> 90 </el-table-column>
85 </el-table> 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">