element-ui的树型控件节点实时刷新

今日在做电商后台管理系统时,我从后端查出来的数据,遍历后赋值给我绑定 key 值的数组,但是发现个问题,没有实时更新过来.

1
2
3
4
5
6
7
8
9
10
11
<!-- 树形控件 -->
<el-tree
ref="treeRef"
:data="rightsList"
:props="treeProps"
show-checkbox
default-expand-all
node-key="id"
:default-checked-keys="defaultKeys"
@node-click="handleNodeClick"
></el-tree>

data()中的属性

1
2
3
4
5
6
7
8
9
 // 所有权限的数据
rightsList: [],
// 树型控件的属性绑定对象
treeProps: {
label: 'authName',
children: 'children'
},
// 默认选中的节点id值
defaultKeys: []

进展:
我发现设置@node-click=”handleNodeClick”事件后,点击节点,新的数据就被渲染出来了,但是这还达不到我的要求,我需要直接打开对话框就显示正常的数据。

1
2
3
4
5
6
handleNodeClick(data, node) {
// 这样可以拿到树组件的 tree对象
const tree = this.$refs.treeRef
this.$refs.treeRef.setCheckedKeys(this.defaultKeys)
console.log(node)
}

这样后我打开对话框,只需要点击下节点就能实时更新数据过来,但即便这样体验感也不好。

最终解决:设置了个延时函数,加个nextTick钩子

我的理解是:

这是因为this.dialogVisible = true时并没有立即更新dom,而是等整个逻辑执行完后再一次新渲染,
因此此时的弹框并未渲染,在dom树中是不存在的,
this.$refs.tree is undefined的所以setCheckedKeys肯定也是undefined。
解决方法: this.$nextTick(),this.$nextTick()会在dom更新之后在执行回调

1
2
3
4
5
6
7
8
9
10
11
// 展示分配权限的对话框
showSetRightDialog(id) {
this.getPowerTree(id)
// 设置个延时函数,不然不能实时更新数据
setTimeout(() => {
this.setRightDialogVisible = true
this.$nextTick(function() {
this.$refs.treeRef.setCheckedKeys(this.defaultKeys)
})
}, 300)
},

效果展示:

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信