vue自定义复选框问题

在vue中我们遇到这种不是表格的自定义的列表展示时，需要自己定义复选框时的需求
按钮当前页面全选和取消按钮
< el-button size=“small” :type=“checkStauts()” @click=“handleAll(status)” style=“margin-left: 30px;” icon=“el-icon-edit”> {{statustrue?‘全选’:‘取消’}} < /el-button>
data(){
return{
status:true,
}
}
methods: {
// 根据状态改变按钮颜色
checkStauts(){
if(this.statustrue){
return ‘success’
}else{
return ‘info’
}
},
//按钮点击后事件操作
handleAll(row){
//默认按钮是全选状态当用户点击后把当前页面显示的列表数据都置为选中状态，并改变背景颜色，并把全选按钮状态改变置成false
if(row==true){
var res=this.allarchivesList
for(var i=0;i<res.length;i++){
res[i].checked = true
var demo=document.getElementById(i)
demo.style.background="#98d7eb"
}
this.allarchivesList=res
this.currentRow=this.allarchivesList
this.status=false//全选按钮变成取消按钮
}else{
//当已经是选中状态用户想取消选中时修改当前数据的背景色并把当前选择操作数据置空，按钮状态置成 true全选状态以便下次操作。
var res=this.allarchivesList
for(var i=0;i<res.length;i++){
res[i].checked = false
var demo=document.getElementById(i)
demo.style.background="#fbfdff"
}
this.allarchivesList=res
this.currentRow=[]
this.status=true
}
},
自定义卡片列表并可以进行复选框操作
< el-col v-for="(item, index) in allarchivesList" :key=‘index’ :span=“6” >
< div >
< div style=“float:left;position:absolute;margin-top: 5px;margin-left:10px;”>
< el-checkbox ref=“checkEvent” v-model=“allarchivesList[index].checked” @change.native=“handleCheck(index)”
style=“float:left;position:absolute;margin-top: 5px;”>
< /el-checkbox>
< /div>
< card :id=“index” @click.native=“viewMore(index)” :archive = “item”>< /card>
< /div>
< /el-col>

methods: {
//自定义复选事件首先给查询的列表数据进行补充checked字段
res.data.records.forEach(item => {
item.checked = false
}) ,
//复选框点击事件
handleCheck(val){
var listResult=this.allarchivesList
for(var i=0;i<listResult.length;i++){
//传入当前下标与列表进行比对
if(ival){
if(listResult[i].checkedfalse){//根据选中状态控制当前选择数组的增减
for(var j=0;j<this.currentRow.length;j++){
if(this.currentRow[j].personnelID==listResult[i].personnelID){
this.currentRow.splice(j,1);//去除选中状态为false的并修改背景色为未选中状态
var demo=document.getElementById(val)
demo.style.background="#fbfdff"
}
}
}else{
this.currentRow.push(listResult[i]) //增加选中状态为true的并修改背景色
var demo=document.getElementById(val)
demo.style.background="#98d7eb"
}
}
}
},
}