naive-ui/demo/documentation/components/tree/enUS/basic.demo.md

Basic

Fortunately, the tree is now alive and it's not balanced.

<n-tree block-node :data="data" :default-expanded-keys="defaultExpandedKeys" />

function createData(level = 4, baseKey = '') {
  if (!level) return undefined
  return Array.apply(null, { length: 6 - level }).map((_, index) => {
    const key = '' + baseKey + level + index
    return {
      label: createLabel(level),
      key,
      children: createData(level - 1, key)
    }
  })
}

function createLabel(level) {
  if (level === 4) return 'Out of Tao, One is born'
  if (level === 3) return 'Out of One, Two'
  if (level === 2) return 'Out of Two, Three'
  if (level === 1) return 'Out of Three, the created universe'
}

export default {
  data() {
    return {
      data: createData(),
      defaultExpandedKeys: ['40', '41']
    }
  }
}