I would like to ask how to deal with the data obtained from the server when using the iview tree control to display.

  1. I used the iview tree control in my project. I want to read the data from each node from the database (in json format), then use this data to form the data parameters of the iview tree control, and then draw and render it on the page.
  2. my main problem is that I don"t have a good way to process the resulting data into the data format required by the iview tree control. I see that the data given in the official website example is an array of nested objects, which is like this:
  3. the way I used for the first time was stupid, so I stopped mapping. I read out the previously acquired and stored local data (array) in the methods lifecycle function, looping the array, taking the first data as the root node, and then putting the first data into the new object array step by step according to the number of digits of the id number. I am a novice, and I know that this method is stupid and ineffective. I hope you can give me some ideas or suggestions. How to process the data into the appropriate format and render it, thank you.
data5: [//tree
                    {
                        title: "parent 1",//
                        expand: true,//
                        render: (h, { root, node, data }) => {//
                            return h("span", {
                                style: {
                                    display: "inline-block",
                                    width: "100%"
                                }
                            }, [
                                h("span", [
                                    h("Icon", {
                                        props: {
                                            type: "ios-folder-outline"
                                        },
                                        style: {
                                            marginRight: "8px"
                                        }
                                    }),
                                    h("span", data.title)
                                ]),
                                h("span", {
                                    style: {
                                        display: "inline-block",
                                        float: "right",
                                        marginRight: "32px"
                                    }
                                }, [
                                    h("Button", {
                                        props: Object.assign({}, this.buttonProps, {
                                            icon: "ios-plus-empty",
                                            type: "primary"
                                        }),
                                        style: {
                                            width: "52px"
                                        },
                                        on: {
                                            click: () => { this.append(data) }
                                        }
                                    })
                                ])
                            ]);
                        },
                        children: [//
                            {
                                title: "child 1-1",
                                expand: true,
                                children: [
                                    {
                                        title: "leaf 1-1-1",
                                        expand: true
                                    },
                                    {
                                        title: "leaf 1-1-2",
                                        expand: true
                                    }
                                ]
                            },
                            {
                                title: "child 1-2",
                                expand: true,
                                children: [
                                    {
                                        title: "leaf 1-2-1",
                                        expand: true
                                    },
                                    {
                                        title: "leaf 1-2-1",
                                        expand: true
                                    }
                                ]
                            }
                        ]
                    }
                ]
Mar.04,2021
Menu