vue ElementUI Tabs 标签页的使用

先在前面附上官网链接

ElementUI Tabs 标签页

下面是自己写的实际应用

在每个tab页嵌套一个form表单，设置左侧方向显示tab-position=“left”，显示如图所示（官网示例）

index.vue

<el-tabs tab-position="left" v-model="activeName" style="height: auto;" @tab-click="handleClick">
   <el-tab-pane label="基础信息" name="first">
     <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
     //此处省略
     </el-form>
   </el-tab-pane>
   <el-tab-pane label="出成配置" name="second">
     <table-form-material v-if="confMaterialVisible" ref="confMaterial"></table-form-material>
   </el-tab-pane>
   <el-tab-pane label="费用配置" name="third">
     <table-form v-if="confCostVisible" ref="confCost"></table-form>
   </el-tab-pane>
</el-tabs>
<script>
    //导入另外两个tabs页需要的表单
	import TableForm from '../costcheckconfcost/index'
	import TableFormMaterial from '../costcheckconfmaterial/index'
	export default {
		data() {
			return {
				activeName: 'first',//默认显示tabs页第一页
				confMaterialVisible: false,
				confCostVisible: false
			}
		},
		//组件自定义名称
	    components: {
	      TableForm,
	      TableFormMaterial
	    },
	    methods: {
			handleClick(tab) {
	        if (tab.name === 'second') {
	          this.confMaterialVisible = true;
	          this.$nextTick(() => {
	            //修改
	            if (this.dataForm.id) {
	              this.$refs.confMaterial.confMaterialInit(this.dataForm.id);
	            }
	          });
	        }
	        if (tab.name === 'third') {
	          this.confCostVisible = true;
	          this.$nextTick(() => {
	          //修改
	          if (this.dataForm.id) {
	            this.$refs.confCost.confCostInit(this.dataForm.id);
	          }
	          });
	        }
	      }
	    }
	  }
</script>