多选框根据后端List自动生成

原创于 2023-04-23 16:29:12 发布 · 194 阅读

CC 4.0 BY-SA版权

文章标签：

在开发前端项目时，遇到根据List数据动态创建多选框的问题。通过Vue.js的v-for指令遍历codeList，结合el-form-item和el-checkbox组件，以v-model绑定每个选项的选中状态，实现了根据后端返回的list自动生成多选框的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在开发前端项目的时候遇到了根据List来自动生成多选框

前端代码

<el-form-item label="特服号" prop="code">
     <span v-for="(item,index) in this.codeList" v-bind:key="index" style="margin-right:20px;">
      <el-checkbox v-model="form.checked[item]" :key="item.key">
           {{ item }}
       </el-checkbox>
     </span>
 </el-form-item>

参数