使用指南

# Vue3
npm i --save @he-tree/vue
# Vue2. 仅支持Vue@2.6
npm i --save @he-tree/vue @vue/composition-api

import { BaseTree, Draggable } from '@he-tree/vue'
import '@he-tree/vue/style/default.css'

import { BaseTree, Draggable } from '@he-tree/vue/vue2'
import '@he-tree/vue/style/default.css'

<template>
  <BaseTree v-model="treeData" />
</template>

<script>
  import { BaseTree, Draggable, pro } from '@he-tree/vue'
  import '@he-tree/vue/style/default.css'

  export default {
    components: { BaseTree },
    data() {
      return {
        treeData: [
          {
            text: 'Projects',
            children: [
              {
                text: 'Frontend',
                children: [
                  {
                    text: 'Vue',
                    children: [
                      {
                        text: 'Nuxt',
                      },
                    ],
                  },
                  {
                    text: 'React',
                    children: [
                      {
                        text: 'Next',
                      },
                    ],
                  },
                  {
                    text: 'Angular',
                  },
                ],
              },
              {
                text: 'Backend',
              },
            ],
          },
          { text: 'Photos' },
          { text: 'Videos' },
        ],
      }
    },
  }
</script>

<template>
  <div>
    Checked: {{ checked }}
    <BaseTree v-model="treeData" ref="tree" @check:node="onCheckNode">
      <template #default="{ node, stat }">
        <button @click="stat.open = !stat.open">
          {{ stat.open ? '-' : '+' }}
        </button>
        <input type="checkbox" v-model="stat.checked" />
        {{ node.text }}
      </template>
    </BaseTree>
  </div>
</template>

<script>
  import { BaseTree, Draggable, pro } from '@he-tree/vue'
  import '@he-tree/vue/style/default.css'

  export default {
    components: { BaseTree },
    data() {
      return {
        treeData: [
          {
            text: 'Projects',
            children: [
              {
                text: 'Frontend',
                children: [
                  {
                    text: 'Vue',
                    children: [
                      {
                        text: 'Nuxt',
                      },
                    ],
                  },
                  {
                    text: 'React',
                    children: [
                      {
                        text: 'Next',
                      },
                    ],
                  },
                  {
                    text: 'Angular',
                  },
                ],
              },
              {
                text: 'Backend',
              },
            ],
          },
          { text: 'Photos' },
          { text: 'Videos' },
        ],
        checked: [],
      }
    },
    methods: {
      onCheckNode() {
        this.checked = this.$refs.tree.getChecked().map((v) => v.data.text)
      },
    },
  }
</script>

<template>
  <Draggable v-model="treeData" />
</template>

<script>
  import { BaseTree, Draggable, pro } from '@he-tree/vue'
  import '@he-tree/vue/style/default.css'

  export default {
    components: { Draggable },
    data() {
      return {
        treeData: [
          {
            text: 'Projects',
            children: [
              {
                text: 'Frontend',
                children: [
                  {
                    text: 'Vue',
                    children: [
                      {
                        text: 'Nuxt',
                      },
                    ],
                  },
                  {
                    text: 'React',
                    children: [
                      {
                        text: 'Next',
                      },
                    ],
                  },
                  {
                    text: 'Angular',
                  },
                ],
              },
              {
                text: 'Backend',
              },
            ],
          },
          { text: 'Photos' },
          { text: 'Videos' },
        ],
      }
    },
  }
</script>

<template>
  <Draggable class="mtl-tree" v-model="treeData" treeLine>
    <template #default="{ node, stat }">
      <OpenIcon
        v-if="stat.children.length"
        :open="stat.open"
        class="mtl-mr"
        @click.native="stat.open = !stat.open"
      />
      <input
        class="mtl-checkbox mtl-mr"
        type="checkbox"
        v-model="stat.checked"
      />
      <span class="mtl-ml">{{ node.text }}</span>
    </template>
  </Draggable>
</template>

<script>
  import { BaseTree, Draggable, pro, OpenIcon } from '@he-tree/vue'
  import '@he-tree/vue/style/default.css'
  import '@he-tree/vue/style/material-design.css'

  export default {
    components: { Draggable, OpenIcon },
    data() {
      return {
        treeData: [
          {
            text: 'Projects',
            children: [
              {
                text: 'Frontend',
                children: [
                  {
                    text: 'Vue',
                    children: [
                      {
                        text: 'Nuxt',
                      },
                    ],
                  },
                  {
                    text: 'React',
                    children: [
                      {
                        text: 'Next',
                      },
                    ],
                  },
                  {
                    text: 'Angular',
                  },
                ],
              },
              {
                text: 'Backend',
              },
            ],
          },
          { text: 'Photos' },
          { text: 'Videos' },
        ],
      }
    },
  }
</script>

{
  text: 'Root',
  children: [
    {text: 'Child'}
  ]
}

<template>
  <YourTree v-model="treeData" />
</template>
<script>
  export default {
    computed: {
      treeData: {
        get() {
          return this.$store.state.treeData
        },
        set(value) {
          this.$store.commit('updateTreeData', value)
        },
      },
    },
  }
</script>

<template>
  <Draggable v-model="treeData" virtualization style="height: 500px" />
</template>

<script>
  import { BaseTree, Draggable, pro } from '@he-tree/vue'
  import '@he-tree/vue/style/default.css'

  export default {
    components: { Draggable },
    data() {
      return {
        treeData: [
          {
            text: 'Projects',
            children: [
              {
                text: 'Frontend',
                children: [
                  {
                    text: 'Vue',
                    children: [
                      {
                        text: 'Nuxt',
                      },
                    ],
                  },
                  {
                    text: 'React',
                    children: [
                      {
                        text: 'Next',
                      },
                    ],
                  },
                  {
                    text: 'Angular',
                  },
                ],
              },
              {
                text: 'Backend',
              },
            ],
          },
          { text: 'Photos' },
          { text: 'Videos' },
          ...new Array(1000).fill(1).map((v) => ({
            text: 'Node-' + Math.random().toString().substring(2, 5),
          })),
        ],
      }
    },
  }
</script>

// Vue3
import { walkTreeData } from '@he-tree/vue'
// Vue2
import { walkTreeData } from '@he-tree/vue/vue2'

walkTreeData(node, (node, index, parent) => {}, {
  childrenKey: 'children',
  reverse: false,
  childFirst: false,
})

let treeData1 = { a: 1, children: [{ b: 1 }] }
let treeData2 = [{ a: 1, children: [{ b: 1 }] }, { c: 1 }]
let treeData3 = { a: 1, sub: [{ b: 1 }] }

declare function walkTreeData<T extends Object>(
  obj: T | T[],
  handler: WalkTreeDataHandler<T>,
  opt?: WalkTreeDataOptions
): void
declare type WalkTreeDataHandler<T> = (
  node: T,
  index: number,
  parent: T | null,
  path: TreeDataPath
) => void | false | 'skip children' | 'skip siblings'
declare type WalkTreeDataOptions = {
  childrenKey?: string
  reverse?: boolean
  childFirst?: boolean
}

let results = []
walkTreeData(tree.rootChildren, (stat) => {
  if (stat.level === 2) {
    results.push(stat)
    return `skip children`
  }
})

<template>
  <BaseTree v-model="treeData" btt />
</template>

<script>
  import { BaseTree, Draggable, pro } from '@he-tree/vue'
  import '@he-tree/vue/style/default.css'

  export default {
    components: { BaseTree },
    data() {
      return {
        treeData: [
          {
            text: 'Projects',
            children: [
              {
                text: 'Frontend',
                children: [
                  {
                    text: 'Vue',
                    children: [
                      {
                        text: 'Nuxt',
                      },
                    ],
                  },
                  {
                    text: 'React',
                    children: [
                      {
                        text: 'Next',
                      },
                    ],
                  },
                  {
                    text: 'Angular',
                  },
                ],
              },
            ],
          },
        ],
      }
    },
  }
</script>

<template>
  <BaseTree v-model="treeData" table>
    <template #prepend="{ tree }">
      <thead>
        <tr>
          <th v-if="!tree.dragOvering">action</th>
          <th>Text</th>
          <th>Level</th>
        </tr>
      </thead>
    </template>
    <template #append="{ tree }">
      <tfoot>
        <tr>
          <th v-if="!tree.dragOvering">action</th>
          <th>Text</th>
          <th>Level</th>
        </tr>
      </tfoot>
    </template>
    <template #default="{ node, stat, indentStyle, tree }">
      <td v-if="!tree.dragOvering">
        <input type="checkbox" v-model="stat.checked" />
        <button @click="stat.open = !stat.open">
          {{ stat.open ? '-' : '+' }}
        </button>
      </td>
      <td :style="indentStyle">
        {{ node.text }}
      </td>
      <td>
        {{ stat.level }}
      </td>
    </template>
  </BaseTree>
</template>

<script>
  import { BaseTree, Draggable, pro } from '@he-tree/vue'
  import '@he-tree/vue/style/default.css'

  export default {
    components: { BaseTree },
    data() {
      return {
        treeData: [
          {
            text: 'Projects',
            children: [
              {
                text: 'Frontend',
                children: [
                  {
                    text: 'Vue',
                    children: [
                      {
                        text: 'Nuxt',
                      },
                    ],
                  },
                  {
                    text: 'React',
                    children: [
                      {
                        text: 'Next',
                      },
                    ],
                  },
                  {
                    text: 'Angular',
                  },
                ],
              },
              {
                text: 'Backend',
              },
            ],
          },
          { text: 'Photos' },
          { text: 'Videos' },
        ],
      }
    },
  }
</script>

// vue3
import { dragContext } from '@he-tree/vue'
// vue2
import { dragContext } from '@he-tree/vue/vue2'