iview Tree 父子联动

iview Tree 父子联动

<template><div><Checkbox v-model="select" @on-change="changeSelectAll">全选</Checkbox><Checkbox v-model="connect" @on-change="changeConnectAll">父子联动</Checkbox><Tree :check-strictly="!connect" :data="data2" show-checkbox></Tree></div>
</template><script>export default {
    name: 'Index',data() {
    return {
    connect: true,select:false,data2: [{
    title: 'parent 1',children: [{
    title: 'parent 1-1',children: [{
    title: 'leaf 1-1-1'},{
    title: 'leaf 1-1-2'}]},{
    title: 'parent 1-2',children: [{
    title: 'leaf 1-2-1'},{
    title: 'leaf 1-2-1'}]}]},{
    title: 'parent 2',children: [{
    title: 'parent 1-1',children: [{
    title: 'leaf 1-1-1'},{
    title: 'leaf 1-1-2'}]},{
    title: 'parent 1-2',children: [{
    title: 'leaf 1-2-1'},{
    title: 'leaf 1-2-1'}]}]}],}},methods: {
    changeSelectAll(val){
    this.data2 = this.checkS(this.data2,val)},changeConnectAll(val){
    this.connect=val},checkS(object, val) {
    return object.map(i=>{
    return {
    ...i, checked: val,children:i.children?this.checkS(i.children,val):[]}})},}}
</script>

自定义迭代遍历Checkbox，修改是否选中的值。

iView Checkbox
iView Tree