vue 标签页以及标签页赋值

Posted 2020-11-15 whycai

背景：

使用vue增加了标签页，点击不同标签页传给后端的值不一样，用来做区分，如图：

 

 

 

vue代码如下：

使用 form.PageA   form.PageB ，后端接收到的值 first、second  1、0

 1 <template>
 2     <div>
 3     <el-form ref="form" :model="form" label-width="80px">
 4     <el-tabs v-model="form.PageA" type="border-card" @tab-click="handleClick">
 5 
 6         <el-tab-pane label="标签页1" name="first">
 7         <el-tabs v-model="form.PageB" >
 8             <el-tab-pane label="标签页a" name="0">
 9         </el-tab-pane>
10 
11             <el-tab-pane label="标签页b" name="1">
12         </el-tab-pane>
13 
14             </el-tabs>
15 
16         </el-tab-pane>
17 
18       <el-tab-pane label="标签页2" name="second">
19 
20 
21         </el-tab-pane>
22         </el-tabs>
23 
24 
25     </el-form>
26 
27 
28     </div>
29 </template>
30 
31 
32 
33 
34 <script>
35 
36 
37 export default {
38   data() {
39     return {
40 
41         form: {
42             PageA:‘‘,
43             PageB:‘‘
44         }
45     }
46   },
47 
48 methods: {
49 
50       },
51 
52 
53 }
54 </script>