DeviceType.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <template>
  2. <div class="UnitType">
  3. <el-button type="primary" size="mini">新建分类</el-button>
  4. <el-input class="searchFrame" placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
  5. <el-tree
  6. class="filter-tree"
  7. :data="data"
  8. :props="defaultProps"
  9. default-expand-all
  10. :filter-node-method="filterNode"
  11. ref="tree"
  12. ></el-tree>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. name: "UnitType",
  18. data() {
  19. return {
  20. filterText: "",
  21. data: [
  22. {
  23. id: 1,
  24. label: "一级 1",
  25. children: [
  26. {
  27. id: 4,
  28. label: "二级 1-1",
  29. children: [
  30. {
  31. id: 9,
  32. label: "三级 1-1-1"
  33. },
  34. {
  35. id: 10,
  36. label: "三级 1-1-2"
  37. }
  38. ]
  39. }
  40. ]
  41. },
  42. {
  43. id: 2,
  44. label: "一级 2",
  45. children: [
  46. {
  47. id: 5,
  48. label: "二级 2-1"
  49. },
  50. {
  51. id: 6,
  52. label: "二级 2-2"
  53. }
  54. ]
  55. },
  56. {
  57. id: 3,
  58. label: "一级 3",
  59. children: [
  60. {
  61. id: 7,
  62. label: "二级 3-1"
  63. },
  64. {
  65. id: 8,
  66. label: "二级 3-2"
  67. }
  68. ]
  69. }
  70. ],
  71. defaultProps: {
  72. children: "children",
  73. label: "label"
  74. }
  75. };
  76. },
  77. watch: {
  78. filterText(val) {
  79. this.$refs.tree.filter(val);
  80. }
  81. },
  82. methods: {
  83. filterNode(value, data) {
  84. if (!value) return true;
  85. return data.label.indexOf(value) !== -1;
  86. }
  87. }
  88. };
  89. </script>
  90. <style lang="scss" scoped>
  91. .UnitType {
  92. .searchFrame{
  93. width: 30%;
  94. display: block;
  95. margin-top: 20px;
  96. }
  97. }
  98. </style>