效果如图,因为找了很多都没找到有效方法,反复测试实现,故此记录
代码如下
如果要走表单切换父子组件的时候,需要时候用v-if来控制切换的时候显示隐藏,不然切换的时候会闪屏一下
<template>
<d2-container>
<el-card class="box-card">
<el-tabs v-model="activeName">
<el-tab-pane label="测试11" name="first">
<VibrationWireSersorl v-if="activeName==='first'"></VibrationWireSersorl>
</el-tab-pane>
<el-tab-pane label="测试22" name="aaa">
</el-tab-pane>
<el-tab-pane label="测试33" name="third">
</el-tab-pane>
</el-tabs>
</el-card>
<template slot="footer"><div></div></template>
</d2-container>
</template>
<script>
import VibrationWireSersorl from "./vibrationWireSersorl.vue";
export default {
components:{
VibrationWireSersorl
},
data() {
return {
activeName: "first"
};
},
mounted() {
},
created() {
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.box-card{
border: none;
height: 100%;
}
//主要css
::v-deep .el-tabs__item {
padding: 0px;
width: 170px;
text-align: center;
}
// 设置标签距离左边的间接
::v-deep .el-tabs__header {
padding-left: 30px; /*设置标签头左边距*/
}
</style>
主要代码就是css
::v-deep .el-tabs__item {
padding: 0px;
width: 170px;
text-align: center;
// padding-right: 40px;
// margin-left: 30px;
}
这样就可以实现了,文章到此结束,希望对你有所帮助~