vue 标签页以及标签页赋值

背景:

使用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>

猜你喜欢

转载自www.cnblogs.com/whycai/p/11655684.html