vue添加第一行为空的多选框

Posted 2023-03-09

参考技术A 有时候会用到card来进行展示数据，但是数据又要进行批量操作，所以在循环的card数据下添加一个多选框能实现相应的功能满足需求。1、卡片内添加多选框：
v-model 代表多选框中显示的状态，选中与非选中，一般绑定一个数组，数组中存在的值就是选中状态。
label 代表多选框中选中的值。change 多选框改变事件，每次点击改变多选框都触发事件，绑定了一个ids方法。2、多选框的函数处理：
//获取数组中数值的下标
indexOf(val, ids)
for (let i = 0; i < ids.length; i++)
//获取当前值的下标
if (ids[i] === val)
return i;


return -1;
,

//多选赋值ids
ids(val)
//检索下标,判断当前值(或对象是否在数组中); 在则返回在的对象,不在就是所有选中的id的值。3、遇到的问题：
此时element checked要点击两次才会显示勾选原因是：v-model已经改变了@change改变的值，所以相当于改变了两次解决办法：
将v-model 改为 :value 即可解决