我们可能在使用表单过程中在确定一个属性后,需要打开对应的子选项
先给大家看一下例子

当我选择了其他后,显示出其他的input 菜单
下面直接贴代码
<a-col :span="16">
<a-form-item label="专业特长" v-bind="validateInfos.hobbiesAndTalents">
<j-dict-select-tag
v-model:value="formData.hobbiesAndTalents"
placeholder="请输入技术信息"
dictCode="zx04"
:disabled="isDisabledAuth('user:xzxxbj')" />
</a-form-item>
</a-col>
<a-col :span="16">
<a-form-item v-if="formData.hobbiesAndTalents === '其他'" label="其他专业特长" v-bind="validateInfos.otherMajor">
<a-textarea
v-model:value="formData.otherMajor"
:rows="4"
placeholder="其他专业特长"
:disabled="isDisabledAuth('user:xzxxbj')"
/>
</a-form-item>
</a-col>
a-col 是行标签 核心代码v-if="formData.hobbiesAndTalents === '其他'" 在from里面判断专业特长变量formData.hobbiesAndTalents 是否等于其他,我们也可以写别的,通过这个方法控制要不要填写子选项内容
文章讲述了在Vue表单中如何根据用户选择的特定属性(如专业特长)动态显示或隐藏子选项,例如当选择其他时,展示文本输入框。作者展示了如何使用v-if指令来控制这种逻辑。
2934

被折叠的 条评论
为什么被折叠?



