ElementUI Table组件树表结构默认展开一级目录,一级目录以下通过懒加载获取

我特么也不知道这个标题应该怎么取,总感觉字少表达不到对应的意思,就这么将就看吧…

需求

默认展开树表结构的根节点及一级目录,一级目录以下的数据需要通过懒加载来获取

出现过的问题

1、设置 default-expand-all ,导致所有的 “懒加载右箭头” 默认都是向下(即展开的样式)
2、设置 expand-row-keys 之后,必须点击根节点的 “懒加载右箭头”,一级目录的 “懒加载右箭头” 才会显示

最终解决方案

加载完根节点及一级目录的数据的时候,通过JS手动触发一下根节点的点击事件

<el-table
	:data="dataTable"
	size="small"
	width="100%"
	height="100%"
	row-key="id"
	lazy
	:load="loadData"
	:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
	<el-table-column
		prop="name"
		label="姓名">
	</el-table-column>
	<el-table-column
		prop="age"
		label="年龄">
	</el-table-column>
</el-table>

<script>
	export default {
		data() {
			return {
				dataTable: []
			}
		},
		method:{
			getList() { // 获取数据
				this.$ajax.aaa().then((e) => { // 自己封装的AJAX 加载根节点及一级目录
					this.dataTable = e.result.list;

					// 默认展开根节点
					this.$nextTick(()=>{
					    document.getElementsByClassName('el-table__expand-icon')[0].click();
					});
				});
			},
			loadData(tree, treeNode, resolve) {
				console.log(treeNode); // 当前节点
				console.log(tree); // 当前行

				if(treeNode.level === 0){
					resolve(this.dataTable[0].children);
				}else{
					this.$ajax.aaaNext({  // 自己封装的AJAX,懒加载加载一级目录以下的数据
					    parentId: tree.id
					}).then((e) => {
					    let res = e.result.list || [];
					    resolve(res);
					});
				}
			},
		},
		mounted(){
		this.getList();
		}
	}
</script>

猜你喜欢

发表评论

最新发布