如果數(shù)據(jù)是一次性返回的話，需要遞歸的方法去展示Tree組件的children

1554186974(1).jpg

<template>
    <Tree :data="data" :render="renderContent"></Tree>
</template>

展示內(nèi)容的方法（官方文檔有的）

renderContent(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%"
          }
        },
        [
          h("span", [
            h("Icon", {
              props: {
                type: "ios-paper-outline"
              },
              style: {
                marginRight: "8px"
              }
            }),
            h("span", data.title)
          ]),
          h(
            "span",
            {
              style: {
                display: "inline-block",
                float: "right",
                marginRight: "32px"
              }
            },
            [
              h("Button", {
                props: {
                  icon: "ios-add"
                },
                style: {
                  marginRight: "8px"
                },
                on: {
                  click: () => {
                    this.append(data);
                  }
                }
              }),
              h("Button", {
                props: {
                  icon: "ios-remove"
                },
                on: {
                  click: () => {
                    this.remove(root, node, data);
                  }
                }
              })
            ]
          )
        ]
      );
    },

//遞歸方法

    handleTree: function(tree, obj) {
      const result = [];
      tree.forEach(item => {
        let expand = false;//是否展開
        let title = item[obj.title];//展示的名字
        let children = item[obj.children];//子節(jié)點
        // 如果有子節(jié)點入撒，遞歸
        if (children) {
          children = this.handleTree(children, obj);
        }
        result.push({ expand, title, children });
      });
      return result;
    }

請求接口返回的數(shù)據(jù)

async getAll() {
  const { code, data, message } = await api.getStore();
  const obj= {
    title: "name",//接口返回的名稱
    children: "areaStores"http://接口返回的子節(jié)點
  };
    this.data= this.handleTree(res.result, obj);
},