vue 标签页以及标签页赋值

时间:2023-11-19 21:59:20

背景:

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

vue 标签页以及标签页赋值

vue代码如下:

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

 <template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-tabs v-model="form.PageA" type="border-card" @tab-click="handleClick"> <el-tab-pane label="标签页1" name="first">
<el-tabs v-model="form.PageB" >
<el-tab-pane label="标签页a" name="0">
</el-tab-pane> <el-tab-pane label="标签页b" name="1">
</el-tab-pane> </el-tabs> </el-tab-pane> <el-tab-pane label="标签页2" name="second"> </el-tab-pane>
</el-tabs> </el-form> </div>
</template> <script> export default {
data() {
return { form: {
PageA:'',
PageB:''
}
}
}, methods: { }, }
</script>