d8d185ffc61325f2db2584584dcf3cdfa37b8ca4.svn-base 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <div class="app-container">
  3. <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
  4. <el-tree
  5. ref="tree2"
  6. :data="data2"
  7. :props="defaultProps"
  8. :filter-node-method="filterNode"
  9. class="filter-tree"
  10. default-expand-all
  11. />
  12. </div>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. filterText: '',
  19. data2: [{
  20. id: 1,
  21. label: 'Level one 1',
  22. children: [{
  23. id: 4,
  24. label: 'Level two 1-1',
  25. children: [{
  26. id: 9,
  27. label: 'Level three 1-1-1'
  28. }, {
  29. id: 10,
  30. label: 'Level three 1-1-2'
  31. }]
  32. }]
  33. }, {
  34. id: 2,
  35. label: 'Level one 2',
  36. children: [{
  37. id: 5,
  38. label: 'Level two 2-1'
  39. }, {
  40. id: 6,
  41. label: 'Level two 2-2'
  42. }]
  43. }, {
  44. id: 3,
  45. label: 'Level one 3',
  46. children: [{
  47. id: 7,
  48. label: 'Level two 3-1'
  49. }, {
  50. id: 8,
  51. label: 'Level two 3-2'
  52. }]
  53. }],
  54. defaultProps: {
  55. children: 'children',
  56. label: 'label'
  57. }
  58. }
  59. },
  60. watch: {
  61. filterText(val) {
  62. this.$refs.tree2.filter(val)
  63. }
  64. },
  65. methods: {
  66. filterNode(value, data) {
  67. if (!value) return true
  68. return data.label.indexOf(value) !== -1
  69. }
  70. }
  71. }
  72. </script>