web前端-Vue动态显示隐藏表单el-form-item
给每项表单项添加一个自己的id名,并用v-model绑定相对应的数据,利用v-if根据上一个表单项的数据值来进行显示或隐藏<!-- 类别展示隐藏 --><el-form-item id="classShowOrHide" v-model="showClass" v-if="showClass==true" label="类别类型" prop="classType"><
·
给每项表单项添加一个自己的id名,并用v-model绑定相对应的数据,利用v-if根据上一个表单项的数据值来进行显示或隐藏
<!-- 类别展示隐藏 -->
<el-form-item id="classShowOrHide" v-model="showClass" v-if="showClass==true" label="类别类型" prop="classType">
<el-select v-model="form.classType" clearable style="width:380px" placeholder="请选择">
<el-option
v-for="dict in classList"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
定义是否展示表单的变量;根据v-model绑定是否展示隐藏
export default {
name: "Class",
components: {
},
data() {
return {
// 类别是否展示
showClass: true,
}
},
methods: {
//显示类别
openClass() {
//是否展示班次类型;开班展示,结束隐藏
this.showClass = true;
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)