我特么也不知道这个标题应该怎么取,总感觉字少表达不到对应的意思,就这么将就看吧…
需求
默认展开树表结构的根节点及一级目录,一级目录以下的数据需要通过懒加载来获取
出现过的问题
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>