multiple.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <template>
  2. <el-tree-select v-model="value" :data="data" multiple :render-after-expand="false" />
  3. <el-divider />
  4. show checkbox:
  5. <el-tree-select v-model="value" :data="data" multiple :render-after-expand="false" show-checkbox />
  6. <el-divider />
  7. show checkbox with `check-strictly`:
  8. <el-tree-select v-model="valueStrictly" :data="data" multiple :render-after-expand="false" show-checkbox check-strictly check-on-click-node />
  9. </template>
  10. <script lang="ts" setup>
  11. import { ref } from 'vue'
  12. const value = ref()
  13. const valueStrictly = ref()
  14. const data = [
  15. {
  16. value: '1',
  17. label: 'Level one 1',
  18. children: [
  19. {
  20. value: '1-1',
  21. label: 'Level two 1-1',
  22. children: [
  23. {
  24. value: '1-1-1',
  25. label: 'Level three 1-1-1',
  26. },
  27. ],
  28. },
  29. ],
  30. },
  31. {
  32. value: '2',
  33. label: 'Level one 2',
  34. children: [
  35. {
  36. value: '2-1',
  37. label: 'Level two 2-1',
  38. children: [
  39. {
  40. value: '2-1-1',
  41. label: 'Level three 2-1-1',
  42. },
  43. ],
  44. },
  45. {
  46. value: '2-2',
  47. label: 'Level two 2-2',
  48. children: [
  49. {
  50. value: '2-2-1',
  51. label: 'Level three 2-2-1',
  52. },
  53. ],
  54. },
  55. ],
  56. },
  57. {
  58. value: '3',
  59. label: 'Level one 3',
  60. children: [
  61. {
  62. value: '3-1',
  63. label: 'Level two 3-1',
  64. children: [
  65. {
  66. value: '3-1-1',
  67. label: 'Level three 3-1-1',
  68. },
  69. ],
  70. },
  71. {
  72. value: '3-2',
  73. label: 'Level two 3-2',
  74. children: [
  75. {
  76. value: '3-2-1',
  77. label: 'Level three 3-2-1',
  78. },
  79. ],
  80. },
  81. ],
  82. },
  83. ]
  84. </script>