drp-ui/src/views/material/label/label-tree.vue

<script>
export default {
  name: "MaterialLabelTree",
  data() {
    return {
      loading: false,
      form: {
        radio: 3,
        input: "",
      },
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    fetchMaterialTree() {
      this.loading = true;
      setTimeout(() => {
        this.data = [
          {
            label: "一级 1",
            children: [
              {
                label: "二级 1-1",
                children: [
                  {
                    label: "三级 1-1-1",
                  },
                ],
              },
            ],
          },
          {
            label: "一级 2",
            children: [
              {
                label: "二级 2-1",
                children: [
                  {
                    label: "三级 2-1-1",
                  },
                ],
              },
              {
                label: "二级 2-2",
                children: [
                  {
                    label: "三级 2-2-1",
                  },
                ],
              },
            ],
          },
        ];
        this.$message.success("success");
        this.loading = false;
      }, 1000);
    },
    onSearch() {
      this.loading = true;
      setTimeout(() => {
        console.log(this.form);
        this.loading = false;
      }, 3000);
    },
    onNodeClick({ label }) {
      console.log("213", this);
      this.$parent.$parent.$children[1].duanduan(label);
      // this.$message(label);
    },
  },
  created() {
    this.fetchMaterialTree();
  },
};
</script>

<template>
  <div class="material-label-tree" v-loading="loading">
    <el-form ref="form" :model="form" label-width="0">
      <el-radio-group v-model="form.radio" @change="onSearch">
        <el-radio :label="3">物料分类</el-radio>
        <el-radio :label="6">物料特征</el-radio>
      </el-radio-group>
      <el-input
        v-model="form.input"
        size="small"
        placeholder="请输入内容"
        @change="onSearch"
      >
        <template #suffix>
          <i class="el-input__icon el-icon-search"></i>
        </template>
      </el-input>
    </el-form>
    <el-scrollbar>
      <el-tree
        :data="data"
        :props="defaultProps"
        @node-click="onNodeClick"
      ></el-tree>
    </el-scrollbar>
  </div>
</template>

<style scoped>
.material-label-tree {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.material-label-tree .el-input {
  margin: var(--margin) 0;
}

.material-label-tree .el-scrollbar {
  flex: 1;
}
.material-label-tree .el-tree {
  user-select: none;
}
</style>