Vue iview dynamically loads the grouping header and solves the problem of page jam.

getColumnList () {
            this.loading=true
            util.ajax({
                url: "/crm/conversionAudit/getAttrs",
                method: "get",
                params: {
                    orgId: this.enterpriseId,
                }
            }).then(response => {
               if (response.data.code==1) {
                   this.columnsList = [
                       {
                           title: "Name",
                           key: "name",
                           align: "center",
                           width: 200,
                           fixed: "left",
                           filters: [
                               {
                                   label: "Joe",
                                   value: 1
                               },
                               {
                                   label: "John",
                                   value: 2
                               }
                           ],
                           filterMultiple: false,
                           filterMethod (value, row) {
                               if (value === 1) {
                                   return row.name === "Joe";
                               } else if (value === 2) {
                                   return row.name === "John Brown";
                               }
                           }
                       },
                       {
                           title: "Other",
                           align: "center",
                           children: [
                               {
                                   title: "Age",
                                   key: "age",
                                   align: "center",
                                   width: 200,
                                   sortable: true
                               },
                               {
                                   title: "Address",
                                   align: "center",
                                   children: [
                                       {
                                           title: "Street",
                                           key: "street",
                                           align: "center",
                                           width: 200
                                       },
                                       {
                                           title: "Block",
                                           align: "center",
                                           children: [
                                               {
                                                   title: "Building",
                                                   key: "building",
                                                   align: "center",
                                                   width: 200,
                                                   sortable: true
                                               },
                                               {
                                                   title: "Door No.",
                                                   key: "door",
                                                   align: "center",
                                                   width: 200
                                               }
                                           ]
                                       }
                                   ]
                               }
                           ]
                       },
                       {
                           title: "Company",
                           align: "center",
                           children: [
                               {
                                   title: "Company Address",
                                   key: "caddress",
                                   align: "center",
                                   width: 200
                               },
                               {
                                   title: "Company Name",
                                   key: "cname",
                                   align: "center",
                                   width: 200
                               }
                           ]
                       },
                       {
                           title: "Gender",
                           key: "gender",
                           align: "center",
                           width: 200,
                           fixed: "right"
                       }
                   ]
               }
           })
       }

columns, with header grouping dynamically requested through ajax did not have this problem yesterday, only with a warning: "You may have an infinite update loop in watcher with expression "columns"". The page jammed the next day. The this.columnsList here is originally the data returned by the API. Here, you can directly use the data in iview 3.x

.

solution: You may have an infinite update loop in watcher with expression" columns "

Feb.14,2022

table rendering data is bound to be stuck. You don't have to use it as much as possible.


Hello, have you solved this problem? I am also worried about this bug

.
Menu