element ui table表格懒加载

Ming-code

已于 2023-07-31 11:07:55 修改

阅读量716

点赞数

分类专栏： Vue element 文章标签： elementui 懒加载

于 2023-07-31 11:05:55 首次发布

本文链接：https://blog.csdn.net/xiaoming7776/article/details/132018077

版权

Vue 同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

element

1 篇文章 0 订阅

订阅专栏

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>

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
	})
},