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