vue iview 动态加载分组表头,页面卡死解决办法

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'
                       }
                   ]
               }
           })
       }

通过ajax动态请求有表头分组的columns,昨天还没这个问题,只是有个警告:'You may have an infinite update loop in watcher with expression "columns"'。第二天就出现页面卡死。这里的this.columnsList原本是接口返回的数据,这里直接用iview 3.x里的数据

解决办法:You may have an infinite update loop in watcher with expression "columns"

阅读 5.1k
2 个回答

table渲染 数据多了是必然卡的 能不用尽量不用。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题