Tree

许多东西都可以用树结构表示,如目录,组织层次结构,生物分类,等。树组件是表示这些事物之间层次关系的一种方式。还可以展开,折叠和选择树中的树节点。

使用

  1. <m-tree id='myTree' checkbox node="{
  2. title: 'p-0',
  3. id: 1,
  4. icon: 'account_balance_wallet',
  5. children: [
  6. {
  7. title: 'p-1',
  8. id: 2,
  9. icon: 'assignment_ind',
  10. children: [
  11. { title: 'p-2', id: 3, icon: 'chrome_reader_mode', checked: true },
  12. { title: 'p-2.5', id: 13, icon: 'chrome_reader_mode' }
  13. ]
  14. },
  15. {
  16. title: 'p-4',
  17. id: 4,
  18. icon: 'extension',
  19. children: [
  20. {
  21. title: 'p-5', id: 5, selected: true, icon: 'dashboard', checked: true,
  22. disabled: true
  23. },
  24. { title: '项目六', id: 6, icon: 'favorite' },
  25. { title: '项目7', id: 7 }
  26. ]
  27. },
  28. {
  29. title: 'p-11',
  30. id: 14,
  31. icon: 'group_work',
  32. children: [
  33. {
  34. title: 'p-12', id: 12, icon: 'fingerprint', checked: true
  35. }
  36. ]
  37. }
  38. ]
  39. }">
  40. </m-tree>

Javascript

  1. var myTree = document.querySelector('#myTree')
  2. myTree.addEventListener('check', (evt) => {
  3. console.log(evt.detail)
  4. })
  5. myTree.addEventListener('toggle', (evt) => {
  6. console.log(evt.detail)
  7. })
  8. myTree.addEventListener('nodeclick', (evt) => {
  9. console.log(evt.detail)
  10. })

获取树的数据:

  1. console.log(myTree.props.node)

API

Props

  1. {
  2. node: obj,
  3. checkbox: boolean
  4. }

Event

  1. {
  2. toggle: function,
  3. nodeclick: function,
  4. check: function
  5. }