前言:

使用  ant design vue  checkbox  ,并非表格的复选框 ,通过 v-for 循环生成复选框 ,并使用 v-model  绑定复选框的值

 循环生成复选框

数据从后端拿到 ,我这里是通过 按钮触发函数请求返回数据 ,从而渲染产生十个复选框,数据存储在数组 searchList 中,这里的循环 v-for 是放在  <a-checkbox> 当中,这个要注意一下,刚开始我试着把 v-for 放在  <a-checkbox-group >  上 亦或者 div标签上,但是这样就只能实现 单选 

        <div style="display:flex; flex-flow: wrap;" >
           <a-checkbox-group >
              <a-checkbox :value="item" 
              v-for="item in this.searchList" :key="item._id"
              style="width:30%;padding:0 0 0 8px;margin:0 0 0 8px">
                  {{item.enterpriseName}}
              </a-checkbox>
            </a-checkbox-group>  
        </div>

 绑定数据

通过给  <a-checkbox-group >  使用 v-model 绑定一个 新数组 ,就可以实现数组绑定 所有复选框的数据了 ,这里的 v-model 属性注意要绑定在   <a-checkbox-group > 上,这是比较坑人的一个点 ,绑定在 <a-checkbox> 上是无法生效的,我当时这样操作后 十个复选框是连体了(同时选中或不选中)

        <div style="display:flex; flex-flow: wrap;" >
            <a-checkbox-group  v-model="searchAddList" >
              <a-checkbox :value="item" 
              v-for="item in this.searchList" :key="item._id"
              style="width:30%;padding:0 0 0 8px;margin:0 0 0 8px">
                  {{item.enterpriseName}}
              </a-checkbox>
            </a-checkbox-group>  
        </div>

 可以看到 数组中绑定的数据


 可以看到已经成功完成了绑定数据 ,大家注意的就是 v-model 要放在 <a-checkbox-group > 上


文章如有错误,恳请大家提出问题,本人不胜感激 。 不懂的地方可以评论,我都会一一回复

文章对大家有帮助的话,希望大家能动手点赞鼓励,大家未来一起努力     长路漫漫,道阻且长  

Logo

前往低代码交流专区

更多推荐