在elementUI的官方文檔中介紹了load方法，但是並沒有介紹load方法使用的實例，今天我們就來捋一捋loda方法：
load屬性需要傳入一個該樹形節點加載時所調用的函數，此函數函數接收兩個參數，一個是node,即當前節點，一個是resolve作為數據處理函數，不懂這個函數的同學可以看看Promise。
這里我要實現一個這樣的樹形結構圖，話不多說，上圖：
下面是elementUI代碼：
<el-tree :props="defaultProps" @node-click="handleNodeClick" lazy accordion :load="treeLoad" highlight-current></el-tree>
值得注意的是，樹形組件懶加載需要添加lazy屬性，load才會生效，詳細介紹請參考官方文檔，prpps屬性為樹形組件的默認配置，我的代碼如下：
defaultProps: {//樹形組件的配置
children: 'children',
label: 'name',
isLeaf: 'is_leaf'
},
這里需要注意的是這里的lable、isLeaf屬性值為后台傳過來代表lable和isLeaf的字段名，我這邊后台傳過來的lable和IsLeaf分別是name和is_leaf,isLeaf只能識別bool值，如果后台傳的是0，1則需要進行轉換。
接下來我們康康handleNodeClick函數，這個函數可以通過接受一個參數來打印當前節點的信息：
...
methods: {
handleNodeClick(data) { //
console.log(data);
},
}
當然在這里這個函數並沒有什么用...
接下來看treeLoad函數：
methods: {
treeLoad(node, resolve) {
if(node.level == 0) {
this.getData(resolve);
}
if(node.level >= 1) {
this.sonTreeLoad(node,resolve)
}
}
}
因為這個函數已經對參數node進行了處理，所以才導致hangdleNodeClick可以不需要。
再來看看上面這個函數調用的getData函數，
getData(resolve) { //獲取類目列表
axios.post(url,{
token:token,
parent_id: 0,
country: 'us'
}).then(res=>{
var data = res.data.data;
for(var i=0 ; i<data.length; i++){
data[i].name += '\n' + data[i].ch_name;//這里需求需要中文和英文分行，插入分行符，需要搭配white-space: pre-wrap屬性
data[i].is_leaf == 1 ? data[i].is_leaf = true : data[i].is_leaf = false; //因為后台傳過來的是0|1，所以這里轉化為true和false
resolve(res.data.data);
}
}).catch(err=>{
console.log(err)
})
}
最后來看看sonTreeLoad函數：
sonTreeLoad(node,resolve){
axios.post(url,{
token: getToken('Admin-Token'),
country: 'us',
parent_id: node.data.id
}).then(res=>{
var data = res.data.data;
for(var i=0 ; i<data.length; i++){
data[i].name += '\n' + data[i].ch_name;
data[i].is_leaf == 1 ? data[i].is_leaf = true : data[i].is_leaf = false;
resolve(res.data.data);
}
}).catch(err=>{
console.log(err)
})
}
可以看到除了傳入的參數有一個不同之外，其他地方基本大同小異。。。。