效果图下:
代码如下:
html:
<template>
<a-form-item field="GIDLST" label="组列表" >
<a-checkbox-group class="custom-checkbox-group" direction="horizontal" v-model="formData.GIDLST" style="margin-left: 10px">
<a-checkbox v-for="item in gidlstlist" :key="item.AID" :label="item.NM" :value="item.AID" >
{{ item.NM }}
</a-checkbox>
</a-checkbox-group>
</a-form-item>
</template>
ts:
const basedata={
GIDLST:[],
}
const gidlstdata = await Get_gidlst_selectlist();
if (gidlstdata) {
gidlstlist.value = gidlstdata
} else {
gidlstlist.value = []
}
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
formData.value=cloneDeep(data.record);
//对后端数据进行加工,得到我们想要得这种结构得数据[1,2,3,4]
formData.value.GIDLST = formData.value.GIDLST.split(',').map(item => Number(item));
}else{
formData.value=basedata
}