vue ElementUI Tabs 标签页的使用

叁歲伎倆 2022-11-20 08:14 904阅读 0赞

## 先在前面附上官网链接 ##

> [ElementUI Tabs 标签页][ElementUI Tabs]

## 下面是自己写的实际应用 ##

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

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>

[ElementUI Tabs]: https://element.eleme.cn/#/zh-CN/component/tabs
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/9e126b8a193c476385371c22b5784644.png