demo4.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <template>
  2. <m-tree
  3. :data="list"
  4. node-key="id"
  5. show-checkbox
  6. :default-expanded-keys="[1,2,6]"
  7. :default-checked-keys="[2]">
  8. </m-tree>
  9. </template>
  10. <script setup>
  11. const list = [
  12. {
  13. id: 1,
  14. label: '一级 1',
  15. children: [
  16. {
  17. id: 4,
  18. label: '二级 1-1',
  19. children: [
  20. {
  21. id: 10,
  22. label: '三级 1-1-1'
  23. },
  24. {
  25. id: 11,
  26. label: '三级 1-1-2'
  27. }
  28. ]
  29. },
  30. {
  31. id: 5,
  32. label: '二级 1-2'
  33. }
  34. ]
  35. },
  36. {
  37. id: 2,
  38. label: '一级 2',
  39. disabled: true,
  40. children: [
  41. {
  42. id: 6,
  43. label: '二级 2-1',
  44. disabled: true,
  45. children: [
  46. {
  47. id: 12,
  48. label: '三级 2-1-1',
  49. disabled: true
  50. }
  51. ]
  52. },
  53. {
  54. id: 7,
  55. label: '二级 2-2'
  56. }
  57. ]
  58. },
  59. {
  60. id: 3,
  61. label: '一级 3',
  62. children: [
  63. {
  64. id: 8,
  65. label: '二级 3-1'
  66. },
  67. {
  68. id: 9,
  69. label: '二级 3-2'
  70. }
  71. ]
  72. }
  73. ]
  74. </script>