使用el-tree組件當后台返回的數據過多導致頁面反應時間過長或頁面崩潰的問題及解決方案

**

需求：

**
獲取后台的所有目錄並展示
開始的做法：
使用el-tree組件根據后台返回的數據和el-tree組件的屬性綁定

<el-tree
  :data="data"
  show-checkbox
  @check-change="handleCheckChange"
  node-key="catalogId"  // 節點綁定目錄ID
  :props="defaultProps" // 修改el-tree默認data數組參數
>
</el-tree>
// 標簽里不可以寫注釋

data() {
	return {
		data: [],
		defaultProps: [{
          children: 'subCatalogDatailTree',
          label: 'catalogName',
        }]
	}
}

調用后台接口獲取所有的樹形結構數據，渲染頁面（當數據返回過多時頁面反應會很慢）
解決方法：后台接口調整，點擊當前節點后才展示下一級的數據，后台返回數據為列表數組
此時

<el-tree :data="data" show-checkbox @check-change="handleCheckChange" node-key="catalogId" @node-click="handleNodeClick" :props="defaultProps" >
</el-tree>

methods: {
  handleNodeClick(data, node) {
  	// data為當前節點的數據
  	// node為當前節點
  	this.axios.get(`......?userId=${this.userId}& parentCatalogId=${data.catalogId}`)
  	.then((res) => {
  		// 把獲取到的數據賦給當前節點數據的children
  		node.data.subCatalogDatailTree = res.data.data;
  	})
  }
}

至此，解決了樹形數據過多的問題，不清楚的可以多看下開發文檔