element 实现el-tree无限级菜单

<template>
  <div class="app-container">
    <el-tree
      :data="treeData"
      :props="defaultProps"
      @node-click="handleNodeClick"
    >
      <template slot-scope="{ data }">
        <div style="width: 100%; display: flex; justify-content: space-between">
          <el-tooltip
            class="item"
            effect="dark"
            :content="data.storagename"
            placement="bottom-start"
          >
            <span
              style="
                width: 140px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
              @click="handleNodeClick(data)"
              >{{ data.storagename }}</span
            >
          </el-tooltip>
        </div>
      </template>
    </el-tree>
  </div>
</template>
<script>
export default {
  components: {
    Aadd,
    Moeid,
  },
  data() {
    return {
      data: [
        {
          dept: 49,
          id: 36,
          level: 1,
          pid: 0,
          queue: "档案室",
          storagename: "市局档案室",
        },
        {
          dept: null,
          id: 37,
          level: 2,
          pid: 36,
          storagename: "1-1-1",
        },
         {
          dept: 49,
          id: 38,
          level: 1,
          pid: 0,
          queue: "档案室",
          storagename: "1111",
        },
         {
          dept: 65,
          id: 39,
          level: 1,
          pid: 0,
          queue: "档案室",
          storagename: "bbbbbbbb",
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  created() {
    // this.init();
  },
  computed: {
   //核心部分
    treeData() {
      //  console.log( this.data)
      let cloneData = JSON.parse(JSON.stringify(this.data)); // 对源数据深度克隆
      return cloneData.filter((father) => {
        let branchArr = cloneData.filter((child) => father.id == child.pid); //返回每一项的子级数组
        branchArr.length > 0 ? (father.children = branchArr) : ""; //如果存在子级，则给父级添加一个children属性，并赋值
        return father.pid == 0; //返回第一层
      });
    },
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
      // this.dataObj = data;
    },
  },
};
</script>
<style scoped>

</style>

效果图：

  //仅供学习使用如有雷同,,纯属虚构