vue element 用户类型可选企业或者个人,选中企业则显示输入营业执照,选中个人则显示输入身份证号
时间: 2024-04-10 18:27:51 浏览: 72
vue element
要根据用户选择的用户类型来显示不同的输入框,并合 Element UI,您可以使用 Element UI表单组件和条件渲染来实现。以下是一个示例:
```html
<>
<div>
el-form label-width="px">
<el-form label="用户类型">
<el-radio-group v-modelselectedUserType">
el-radio label="enterprise">业</el-radio>
<el-radio label="personal">个人</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="selectedUserType === 'enterprise'" label="营业执照">
<el-input v-model="businessLicense"></el-input>
</el-form-item>
<el-form-item v-if="selectedUserType === 'personal'" label="身份证号">
<el-input v-model="idCard"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
selectedUserType: '',
businessLicense: '',
idCard: '',
};
},
};
</script>
```
在上述代码中,我们使用了 Element UI 的 `el-form` 和 `el-form-item` 组件来创建表单布局。根据 `selectedUserType` 的值,使用 `v-if` 来判断显示不同的表单项。
如果用户选择了 "企业",则显示营业执照输入框;如果用户选择了 "个人",则显示身份证号输入框。
您可以根据实际需求修改表单项的标签和绑定的变量,以及使用其他 Element UI 的表单组件来替换 `<el-input>`。
希望以上信息能对您有所帮助!如果您还有其他问题,请随时提问。
阅读全文