关于 vue 生命周期 使用 element-ui Tree 组件的问题

HongHaiyang
  • 104

vue 和 element-ui 的版本分别是"vue": "^2.2.6""element-ui": "^1.2.8"

现在的问题是我使用 elementui 的 tree 组件,组件样式如下:

clipboard.png

这个组件他有几个方法是用代码去设置节点的勾选:

clipboard.png

我现在的目的是页面刷新后检测 sessionStorage 中我保存勾选的节点的值(懒得用 vuex),这一步是没问题的,可以读取我刷新前勾选的节点的数据,sessionStorage.getItem('defCheckedKeys'),然后调用 elementui 提供的setCheckedKeys方法去勾选节点,但是当我紧接着再去使用getCheckedNodes方法的时候返回的值就是空的(按理来说应该返回上一步我用setCheckedKeys方法勾选的节点的数据),生命周期钩子我用的 mounted。代码如下:

        mounted:function(){
            //调用自动勾选节点函数
            this.getDefCheckedKeys()
        },
        methods:{
            //是否需要自动勾上节点
            getDefCheckedKeys(){
                debugger
                //如果sessionStorage中存储有defCheckedKeys属性则根据属性值自动勾上tree组件
                if (sessionStorage.getItem('defCheckedKeys')) {
                    console.log('defCheckedKeys:',JSON.parse(sessionStorage.getItem('defCheckedKeys')))
                    //给tree组件设置勾选的节点
                    this.$refs.tree.setCheckedKeys(JSON.parse(sessionStorage.getItem('defCheckedKeys')))                  
                    this.treeInfo()
                }
            },
            //根据勾选的节点提供数据
            treeInfo(){                             
                this.tree = this.$refs.tree.getCheckedNodes()
                if (this.tree.length === 0) {
                    this.editableTabs = []
                    //子传递数据给父组件
                    this.$emit('editableTabs', this.editableTabs)
                    sessionStorage.removeItem('defCheckedKeys')
                }
                //若 tree 组件中勾选了内容
                else {
                ...

如果我用 updated 的钩子的话,我想要的效果可以实现,只是 treeInfo 方法会调用两遍,由于对数据的处理比较多,对性能有些许影响。

后来我尝试了一下,在页面上加两个 button,各自 click 事件绑定的方法分别是testtesttest,testtesttest2,方法如下:

            testtesttest() {
                console.log(this.$refs)
                this.$refs.tree.setCheckedKeys([
                    "593e51144f4ff72143521fec"
                    , "593faba39242337cb406e810"
                    , "5954b5ca60185336a1e32c25"
                    , "5955f9374e234e8675d02be7"
                    , "5962ee1116f80eea28151551"])
            },
            testtesttest2(){
                console.log('this.$refs.tree.getCheckedNodes():',this.$refs.tree.getCheckedNodes())
                console.log('this.$refs.tree.getCheckedKeys():',this.$refs.tree.getCheckedKeys())
            },

在页面加载完后我手动去点击两个 button,返回的结果都是没问题的:
clipboard.png

如果把这两个方法放到 mounted 钩子里自动执行结果就是:
clipboard.png

放在 updated 钩子里就是有结果但是执行两遍:

clipboard.png

clipboard.png

请问这种情况应该怎么办,我觉得问题就是处在钩子调用中,如果页面加载完我手动点就是没问题的,vue 的生命周期我也仔细去看了,也没什么头绪,,,,

小弟这里先行谢过~

回复
阅读 5.4k
2 个回答
✓ 已被采纳

这样调用treeInfo()试试:

this.$nextTick(() =>{
    this.treeInfo()
})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏