vue el-tab-pane 下使用div v-if 隐藏dom标签

不吃萝卜的兔子ss

已于 2023-04-16 22:56:39 修改

阅读量1.4k

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-04-16 22:53:43 首次发布

本文链接：https://blog.csdn.net/Tianxuan_kong/article/details/130189997

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章讲述了在Vue项目中，通过el-tabs组件和v-if指令来动态渲染表单内容的方法。当activeName定位在特定标签页时，根据form.contact的值显示相应的输入字段，实现了不同标签页下不同表单字段的显示与隐藏。通过点击el-tab-pane，将name传递给父级el-tabs，再更新form.contact的值，从而控制div的显示状态。

摘要由CSDN通过智能技术生成

校验相同的代码，会发生冲突，因此使用v-if 不渲染div下的标签

vue部分代码

// 绑定activeName 存储 el-tab-pane 的name属性

<el-tabs type="card" v-model="activeName"  @tab-click="handleClick" style="height: 200px;">
// name 属性会绑定到 el-tabs 的v-model 中 只能用数字，用其他会报错，被这里坑惨了
              <el-tab-pane  label="不限"  name="0">
                <div v-if="this.form.contact === '0'">
                  <el-form-item prop="phone" label="发布手机号 (必填)">
                    <el-input type="text" v-model="form.phone" clearable style="width: 225px;"></el-input>
                  </el-form-item>

                  <el-form-item prop="email"  label="发布邮箱 (必填)">
                    <el-input type="text" v-model="form.email" clearable style="width: 225px;"></el-input>
                  </el-form-item>
                </div>
              </el-tab-pane>

              <el-tab-pane label="手机号"  name="1">
                <div v-if="this.form.contact === '1'">
                  <el-form-item prop="phone" label="发布手机号 (必填)">
                    <el-input type="text" v-model="form.phone" clearable style="width: 225px;"></el-input>
                  </el-form-item>
                </div>
              </el-tab-pane>



              <el-tab-pane label="邮箱"  name="2">
                <div v-if="this.form.contact === '2'">
                  <el-form-item prop="email" label="发布邮箱 (必填)">
                    <el-input type="text" v-model="form.email" clearable style="width: 225px;"></el-input>
                  </el-form-item>
                </div>
              </el-tab-pane>

            </el-tabs>



export default {
	data(){
		return {
			activeName: '0',	// 对应el-tab-pane 的name
			form {
				contact: "0",	// form表单
			}
			
		}
	},
method {
	    handleClick(tab,event) {

      // 把值传到表单
      this.form.contact = tab.name
    }


}

}