欢迎访问 生活随笔!

凯发k8官方网

当前位置: 凯发k8官方网 > 前端技术 > vue >内容正文

vue

vue复选框组件自定义对勾-凯发k8官方网

发布时间:2023/11/30 vue 18 豆豆
凯发k8官方网 收集整理的这篇文章主要介绍了 vue复选框组件自定义对勾_vue element:树级复选框组件使用 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

handlecheck(checkedkeys,checkednodes,halfcheckedkeys,halfcheckednodes){var len = 0,num = 0;var _alen = 0;var a =[];var b =[];var copyarr =[];for (var i = 0;i < checkednodes.checkednodes.length;i ){//记录子节点的索引

if (checkednodes.checkednodes[i].children === null) {

len ;

b.push(i)

}//判断是否有全选,如果有,则获取父节点信息的索引

if (checkednodes.checkednodes[i].children != null) {

num ;

a.push(i)

}

}

console.log('num')

console.log(checkednodes.halfcheckedkeys)

console.log(num)

console.log('a')

console.log(a)//如果都是半选状态

if ( num === 0) {//将全是半选的模式设置为1

this.flag = 1

//将父节点信息和子节点信息加入到param数组中(这个数组与后台数据交互)

this.param =[]

let _pollutant={}this.pollutant.projectid = this.iddthis.pollutant.subcateid = checkednodes.halfcheckedkeys[checkednodes.checkedkeys.length-1]this.pollutant.cateid = checkednodes.checkedkeys[checkednodes.checkedkeys.length-1]

object.assign(_pollutant,this.pollutant)this.param.push(_pollutant)

console.log('半选状态')

console.log(this.param)

}//如果都是全选状态

if (num > 0 && checkednodes.halfcheckedkeys.length === 0) {//如果由半选进入全选状态,则将数组置空,然后将该父节点下的所有子节点放入数组中

if (this.flag === 1)this.param =[]//如果由混合进入全选状态,这时如果将这个父节点的所有子节点加入数组则会有重复数据,这时需要删除之前多加的数据

if (this.flag === 3) {this.param.splice(this.param.length-1,1)

}//获取最新父节点的索引以及该父节点的长度

_alen= a.length-1;var length =checkednodes.checkednodes[a[_alen]].children.length;

console.log(length)//最新父节点下的所有子节点放到数组

for (var j = 0;j

let _pollutant={}this.pollutant.projectid = this.iddthis.pollutant.subcateid =checkednodes.checkednodes[a[_alen]].idthis.pollutant.cateid =checkednodes.checkednodes[a[_alen]].children[j].id

object.assign(_pollutant,this.pollutant)this.param.push(_pollutant)

}

console.log('全选状态')

console.log(this.param)//将当前全选状态设置为2

this.flag = 2;

}//如果是全选和半选都有

if (num > 0 && checkednodes.halfcheckedkeys.length != 0) {

console.log(checkednodes.checkednodes)

console.log(checkednodes.halfcheckednodes)

_alen= a.length - 1console.log(a[_alen])//如果之前操作全是半选模式 或者是混合模式 ,则将全选的再加入数组

if (this.flag === 1 || this.flag === 3) {var length =checkednodes.checkednodes[a[_alen]].children.length;for (var j = 0;j

let _pollutant={}this.pollutant.projectid = this.iddthis.pollutant.subcateid =checkednodes.checkednodes[a[_alen]].idthis.pollutant.cateid =checkednodes.checkednodes[a[_alen]].children[j].id

object.assign(_pollutant,this.pollutant)this.param.push(_pollutant)

}

}

console.log(this.flag)

console.log('flag')//将全选之后的节点放到数组中//如果之前操作全是全选,则将半选的再加入数组

if (this.flag === 2) {

console.log('cnlen')var cnlen = a[_alen] checkednodes.checkednodes[a[_alen]].children.length 1console.log(cnlen)

console.log(checkednodes.halfcheckedkeys.length)for (var i = cnlen;i < checkednodes.checkednodes.length; i ) {

let _pollutant={}this.pollutant.projectid = this.iddthis.pollutant.subcateid = checkednodes.halfcheckedkeys[checkednodes.halfcheckedkeys.length-1]this.pollutant.cateid =checkednodes.checkednodes[i].id

object.assign(_pollutant,this.pollutant)this.param.push(_pollutant)

}

}

console.log('全选和半选')

console.log(this.param)this.flag = 3}

},

总结

以上是凯发k8官方网为你收集整理的vue复选框组件自定义对勾_vue element:树级复选框组件使用的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错,欢迎将凯发k8官方网推荐给好友。

  • 上一篇:
  • 下一篇:
网站地图