javascript 前端 elementui中select搭配tree使用多选,并且实现选中所有子集展示的是父级

html代码:

v-model='formModel.businessAreaCodes'

style='width:100%'

@change='selectChange' //这个是内容有改变调用的方法

@visible-change='handleVisible' //这个是因为回显的时候比较慢所以在点击下拉框出现的时候做操作

multiple //这个是控制多选

>

:value='mineStatusValue'

style='height:auto'

>

:data='datas' //这个是树形结构的数据

show-checkbox

node-key='code' //他必须要有,这是连接select以及回显的关键

ref='tree' //获取树形结构的实例用于获取所有选中的数据

:default-checked-keys='treeDefault' //这个是用于回显数据 例如:['100000','100001'] 只有跟上边node-key里边的值一样才会回显

highlight-current

:props='defaultProps'

@check-change='handleCheckChange'

>

 以下是js代码:

data(){

return {

treeDefault:[], //和下边的codes一样

mineStatusValue:[], //这个值是存储属性结构的值

codes:[], //这个值可以不用 和上边treeDefault作用一样,可以不用,我这用于存储处理后的数据,因为回显的时候后端返的和我要的不太一样 在这里就先不用这个值

formModel:{

businessAreaCodes:[] //展示到select里边内容 ['山西省','北京市']

}

}

}

methods:{

//这个方法相当于回显的一个优化,具体操作看情况定

handleVisible(){

},

//这个是树形结构多选框改变后触发的事件

handleCheckChange(){

// let res=this.$refs.tree.getCheckedNodes(true) 这个是获取实例上所有选中的数据子集全部选中就展示全部展示的子集,和今天的这个题目不太匹配

let res=this.getSimpleCheckedNodes(this.$refs.tree) //这个是子集全部选中以后展示父级

let arrLabel=[]

let arr=[]

res.forEach(item=>{

arrLabel.push(item.name)

arr.push(item)

})

this.formModel.businessAreaCodes=arrLabel

this.minStatusValue=arr

}

//这是select点击x的方法

selectChange(e){

let arrNew=[]

let dataLength=this.mineStatusValue.length

let elength=e.length

for(let i=0;i

for(let j=0;j

if(e[j]===this.mineStatusValue[i].name){

arrNew.push(this.mineStatus[i])

}

}

}

this.formModel.businessAreaCodes=e

this.$refs.tree.setCheckedNodes(arrNew) //这是保持下边的多选框和上边select内容一致

},

//这个方法直接拿着用就行

getSimpleCheckedNodes(store){

const checkedNodes=[]

const traverse=(node)=>{

const childNodes=node.root ? node.root.childNodes : node.childNodes //这些都是实例上的东西,不用管,拿着用就行

childNodes.forEach(child=>{

if(child.checked){

checkedNodes.push(child.data)

}

if(child.indeterminate){

traverse(child)

}

})

}

traverse(store)

return checkedNodes

}

}

 效果如下:

代码可能会有问题,因为开发电脑是内网,没办法把代码粘过来,有任何问题可以评论告诉我

相关阅读

 您阅读本篇文章共花了：