default-state.vue 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template>
  2. <el-tree
  3. :data="data"
  4. show-checkbox
  5. node-key="id"
  6. :default-expanded-keys="[2, 3]"
  7. :default-checked-keys="[5]"
  8. :props="defaultProps"
  9. />
  10. </template>
  11. <script lang="ts" setup>
  12. const defaultProps = {
  13. children: 'children',
  14. label: 'label',
  15. }
  16. const data = [
  17. {
  18. id: 1,
  19. label: 'Level one 1',
  20. children: [
  21. {
  22. id: 4,
  23. label: 'Level two 1-1',
  24. children: [
  25. {
  26. id: 9,
  27. label: 'Level three 1-1-1',
  28. },
  29. {
  30. id: 10,
  31. label: 'Level three 1-1-2',
  32. },
  33. ],
  34. },
  35. ],
  36. },
  37. {
  38. id: 2,
  39. label: 'Level one 2',
  40. children: [
  41. {
  42. id: 5,
  43. label: 'Level two 2-1',
  44. },
  45. {
  46. id: 6,
  47. label: 'Level two 2-2',
  48. },
  49. ],
  50. },
  51. {
  52. id: 3,
  53. label: 'Level one 3',
  54. children: [
  55. {
  56. id: 7,
  57. label: 'Level two 3-1',
  58. },
  59. {
  60. id: 8,
  61. label: 'Level two 3-2',
  62. },
  63. ],
  64. },
  65. ]
  66. </script>