How iview table accepts nested array objects

The data property of

iview table defaults to accepting only non-nested array objects in the following format

       data: [{
                    name: "John Brown",
                    age: 18,
                    address: "New York No. 1 Lake Park",
                    date: "2016-10-03"
                },
                {
                    name: "Jim Green",
                    age: 24,
                    address: "London No. 1 Lake Park",
                    date: "2016-10-01"
                }
            ]

but the data now returned by the backend is a nested array object, similar to the following:

        data: [{value: "jiangsu",
                label: "",
                children: [
                    {
                        value: "nanjing",
                        label: "",
                        children: [
                            {
                                value: "fuzimiao",
                                label: "",
                            }
                        ]
                    }
                ]

is there a way for table to accept data in this nested format? Or is there any way to process data in this nested format into a format acceptable to table?

Mar.10,2021

has it been solved now? What I do is the grouping header, which updates the columns asynchronously, and keeps reporting an error, saying that there is an endless loop update.


ask the same question, I have the same problem. The data format accepted by the table in


iwiew is fixed unless you change the source code @ _ @. The acquired data can only be converted to the format required by the iwew table. You can write a recursive method to convert this nested format into what the table needs.


return h ('Div',

                       params.row..map(function(type){ 
                                return h('img', {  
                                attrs: {
                                  src: type
                                }, 
                            });  
                        })  
                    
                    );

is essentially the same, which is to loop the array in the data


solve


through render function

none of these answers is written about how to actually operate, which is very unfriendly to beginners. I found an example in an article, which is still more reliable https://www.jianshu.com/p/f44.

.

clipboard.png



            render: function (h, params) {
              if (this.row.node_info[0].hwmodel) {
                return h('div', this.row.node_info[0].hwmodel);
              } else {
                return h('div', this.row.node_info[0].hwtype);
              }
            }

does not understand the above code, it is possible to use the render function, this.row reads the line to be output, then navigates to the value to be returned through the JavaScript variable, and then return is available.


are you going to do the table splitting function?

Menu