我想在点击已在库中的按钮之后,下方显示一个输入框,输入数量,如果点击未在库中,就显示更多input框,请问我要怎么写呢?
<el-form-item label="添加方式">
<el-col :span="24">
<div class="grid-content bg-purple">
<el-radio border size="mini" @change="existenceChange(existence)">
已在库中
el-radio>
<el-radio border size="mini" @change="existenceChange(existence)" >
未在库中
el-radio>
div>
el-col>
el-form-item>
参考GPT和自己的思路:您可以根据点击的不同radio来显示不同的输入框,在existenceChange()
方法中根据传入的existence
参数来判断是点击了哪个radio,然后使用v-if
或v-show
来切换输入框的显示。例如:
<el-form-item label="添加方式">
<el-col :span="24">
<div class="grid-content bg-purple">
<el-radio border size="mini" @change="existenceChange('inStock')" v-model="existence">
已在库中
</el-radio>
<el-radio border size="mini" @change="existenceChange('notInStock')" v-model="existence">
未在库中
</el-radio>
</div>
</el-col>
</el-form-item>
<el-form-item label="数量" v-show="existence === 'inStock'">
<el-input v-model="quantity"></el-input>
</el-form-item>
<el-form-item label="更多信息" v-show="existence === 'notInStock'">
<el-input v-model="moreInfo"></el-input>
</el-form-item>
在data
中定义existence
、quantity
和moreInfo
属性,并在existenceChange()
方法中对它们进行赋值或清空等操作即可。