在使用el-checkbox / el-checkbox-group时,发现若label绑定的是对象,则是无法回显的,参考了很多方法,但大多都无法解决,最终参考下面的方法解决,记录一下。
<el-checkbox :label="JSON.stringify(item)" class="mb10" v-for="(item, key) in state.sizes" :key="item.id" size="large" border>
<template #default>
<p class="mb10"> {{item.title}}</p>
<p class="mb10"> {{item.px}} px</p>
<p> {{item.size}} mm</p>
</template>
</el-checkbox>
参考:el-checkbox绑定Object/Array解决方法(同附el-checkbox-group解决方法)_el-checkbox绑定对象_奈登里的博客-CSDN博客el-checkbox如果绑定不为string / number / boolean时,是无法回显的。而在获取参数对绑定参数进行JSON.stringify转换即可解决回显问题,如若在提交时保持数据结构一致,则再进行JSON.parse转换即可。同时该操作也可同用于el-checkbox-group如有疑问,欢迎讨论......_el-checkbox绑定对象https://blog.csdn.net/weixin_42534421/article/details/125504304?spm=1001.2101.3001.6650.17&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-125504304-blog-126431958.235%5Ev38%5Epc_relevant_sort_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-125504304-blog-126431958.235%5Ev38%5Epc_relevant_sort_base2&utm_relevant_index=25