<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>