filterable.vue 2.3 KB

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