记录一下我使用element3使用树形控件遇见的坑

项目要求是懒加载，初始值传递的接口id是0，当懒加载的时候，根据选择的id去调取接口，大意了没看见，懒加载是不需要绑定data的！绑定了data，导致了死循环，数组无限增加，还有一点，需要使用插槽来显示名称。

使用组件：

  <el-tree
                :load="loadNode"
                lazy
                :props="defaultProps"
                v-loading="state.loading"
              >
                <template #default="{ node, data }">
                  <span class="custom-tree-node">
                    <i :class="data.icon"></i>
                    <span class="text">{{ node.label }}</span>
                  </span>
                </template>
              </el-tree>

使用数据

  // 全部数据
  const getAllList = () => {
    state.loading = true
    // if (state.keyword) state.nodeId = '0'
    getImUserSelector(state.nodeId, state.keyword).then((res) => {
      state.leftorganizeData = res.data.list
      console.log(state.leftorganizeData)
      state.loading = false
    })
  }
  const loadNode = (node: any, resolve: (data: []) => void) => {
    // console.log(node.level)
    if (node.level == 0) {
      state.nodeId = '0'
      return resolve(state.leftorganizeData)
    }
    state.nodeId = node.data.id
    getImUserSelector(state.nodeId).then((res) => {
      resolve(res.data.list)
    })
  }
  const defaultProps = {
    children: 'children',
    label: 'fullName',
    isLeaf: 'isLeaf',
  }