vue antdV 求教一个功能：表单多选框勾选后才能输入文本框功能

[ohohohh]

功能如下: 选项 1 到 8 文字从后台获取,当勾选了选项一后，才可以输入选项一后面的输入框，同时这个是个表单功能，请教保存什么样的格式到数据库方便数据回显？？？

[JustLookBy]

json，选项 n 作为 key,输入值做 value,没输入的就空字符串，前端直接判断是否空字符串回显

[ohohohh]

@JustLookBy 大佬能搞个 demo 吗？

[hm20062006ok]

<input id="opt1" type="checkbox" v-model="checked">
<label for="opt1">选项 1</label>
<input type="text" style="width: 50px;margin-left: 10px" :disabled="!checked">

data () {
return {
checked:false,
}
},

[ohohohh]

<a-col v-for="(item, index) in otherTypeList" :key="index" :xs="20" :xl="5">
<a-checkbox :value="item.id" style="margin-top: 5px">
{{ item.key }}
</a-checkbox>
<a-input style="width: 50px" :max-length="3" size="small" />
<span> 份</span>
</a-col>
效果如下:

如果简单高效设置获取表单的值，并保存到后端

[ohohohh]

https://codesandbox.io/embed/vue-antd-template-forked-wdmw7?fontsize=14&hidenavigation=1&theme=dark
各位大佬会的麻烦请教下

[hm20062006ok]

<template>
<a-form :form="form" class="form">
<div :style="{ borderBottom: '1px solid #E9E9E9' }">
<a-checkbox :checked="checkAll">
Check all
</a-checkbox>
</div>
<a-form-item label="其他成果">
<a-row :gutter="12">

<a-col
v-for="(item, index) in otherData"
:key="index"
:xs="20"
:xl="5"
>
<a-checkbox :value="item.id" style="margin-top: 5px" v-model="item.ischecked" @change="handleChange(item)">
{{ item.value }}
</a-checkbox>
<a-input style="width: 50px" :max-length="3" size="small" :disabled="!item.ischecked" />
<span> 份</span>
</a-col>

</a-row>
</a-form-item>
</a-form>
</template>
<script>
export default {
data() {
return {
checkAll: true,
form: this.$form.createForm(this),
otherData: [
{
id: 108,
value: "方案册",
ischecked: true
},
{
id: 109,
value: "模型",
ischecked: false
},
{
id: 110,
value: "展板",
},
{
id: 111,
value: "案件数据表",
ischecked: false
},
{
id: 112,
value: "结构计算书",
ischecked: false
},
{
id: 113,
value: "建筑节能报告书",
ischecked: false
},
{
id: 114,
value: "施工图审查意见回复",
ischecked: false
},
{
id: 115,
value: "参考蓝图",
ischecked: false
},
{
id: 116,
value: "参考白图",
ischecked: false
},
{
id: 117,
value: "设计变更通知单",
ischecked: false
},
{
id: 118,
value: "节能设计审查备案表",
ischecked: false
},
{
id: 119,
value: "工程竣工验收备案资料",
ischecked: false
},
{
id: 120,
value: "夏热冬暖节能设计审查表",
ischecked: false
},
{
id: 121,
value: "装修审查表",
ischecked: false
},
{
id: 122,
value: "光盘",
ischecked: false
},
],
};
},
methods: {
handleChange(item) {
console.log(`selected ${item.ischecked}`);
},
},
};
</script>

[ohohohh]

谢谢各位大佬，已经解决了