iview Tree组件（无限级）

如果数据是一次性返回的话，需要递归的方法去展示Tree组件的children

1554186974(1).jpg

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

展示内容的方法（官方文档有的）

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];//子节点
        // 如果有子节点，递归
        if (children) {
          children = this.handleTree(children, obj);
        }
        result.push({ expand, title, children });
      });
      return result;
    }

请求接口返回的数据

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