label-tree.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <script>
  2. export default {
  3. name: "MaterialLabelTree",
  4. data() {
  5. return {
  6. loading: false,
  7. form: {
  8. radio: 3,
  9. input: "",
  10. },
  11. data: [],
  12. defaultProps: {
  13. children: "children",
  14. label: "label",
  15. },
  16. };
  17. },
  18. methods: {
  19. fetchMaterialTree() {
  20. this.loading = true;
  21. setTimeout(() => {
  22. this.data = [
  23. {
  24. label: "一级 1",
  25. children: [
  26. {
  27. label: "二级 1-1",
  28. children: [
  29. {
  30. label: "三级 1-1-1",
  31. },
  32. ],
  33. },
  34. ],
  35. },
  36. {
  37. label: "一级 2",
  38. children: [
  39. {
  40. label: "二级 2-1",
  41. children: [
  42. {
  43. label: "三级 2-1-1",
  44. },
  45. ],
  46. },
  47. {
  48. label: "二级 2-2",
  49. children: [
  50. {
  51. label: "三级 2-2-1",
  52. },
  53. ],
  54. },
  55. ],
  56. },
  57. ];
  58. this.$message.success("success");
  59. this.loading = false;
  60. }, 1000);
  61. },
  62. onSearch() {
  63. this.loading = true;
  64. setTimeout(() => {
  65. console.log(this.form);
  66. this.loading = false;
  67. }, 3000);
  68. },
  69. onNodeClick({ label }) {
  70. console.log("213", this);
  71. this.$parent.$parent.$children[1].duanduan(label);
  72. // this.$message(label);
  73. },
  74. },
  75. created() {
  76. this.fetchMaterialTree();
  77. },
  78. };
  79. </script>
  80. <template>
  81. <div class="material-label-tree" v-loading="loading">
  82. <el-form ref="form" :model="form" label-width="0">
  83. <el-radio-group v-model="form.radio" @change="onSearch">
  84. <el-radio :label="3">物料分类</el-radio>
  85. <el-radio :label="6">物料特征</el-radio>
  86. </el-radio-group>
  87. <el-input
  88. v-model="form.input"
  89. size="small"
  90. placeholder="请输入内容"
  91. @change="onSearch"
  92. >
  93. <template #suffix>
  94. <i class="el-input__icon el-icon-search"></i>
  95. </template>
  96. </el-input>
  97. </el-form>
  98. <el-scrollbar>
  99. <el-tree
  100. :data="data"
  101. :props="defaultProps"
  102. @node-click="onNodeClick"
  103. ></el-tree>
  104. </el-scrollbar>
  105. </div>
  106. </template>
  107. <style scoped>
  108. .material-label-tree {
  109. height: 100%;
  110. display: flex;
  111. flex-direction: column;
  112. }
  113. .material-label-tree .el-input {
  114. margin: var(--margin) 0;
  115. }
  116. .material-label-tree .el-scrollbar {
  117. flex: 1;
  118. }
  119. .material-label-tree .el-tree {
  120. user-select: none;
  121. }
  122. </style>