vue ElementUI Tabs 标签页的使用
先在前面附上官网链接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>
更多推荐
已为社区贡献13条内容
所有评论(0)