element ui table表格懒加载_给elementui的table添加懒加载事件

table表格懒加载

<el-table
	ref="tableData"
	:data="tableData"
	style="width: 100%"
	border
	row-key="id"
	lazy
	:load="handleLoad"
	:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
</el-table>
1
2
3
4
5
6
7
8
9
10

handleLoad(tree, treeNode, resolve){
	// console.log(tree, treeNode, resolve)
	//请求的参数
	let obj = {}
	obj.a=1;
	obj.b=2;
	//table加载动画
	this.loading = true;
	//请求接口
	get(obj).then(res => {
		if(res.code === 0) {
			let subList = res.data;
			if(subList && subList.length && subList.length > 0){
				let datas = subList.map((item, index) => {
					//判断是否有下一级分类，如果有分类则显示箭头，否则不显示
					if(item.flag=== 1 || item.flag=== '1'){
						item.hasChildren = false
					}else {
						item.hasChildren = true
					}
					return item
				})
				this.loading = false;
				resolve(datas)
			}else {
				tree.hasChildren = false
				this.loading = false;
				resolve([])
			}
		}
	}).catch(()=>{
		// 请求失败，抛出错误，取消loading动画，取消加载中动画
		this.loading = false;
		treeNode.loading = false
	})
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36