【element-ui】element ui 的树形组件绑值问题

项目中用到element UI 的树形组件tree，现在是希望组件中选中的项在打开页面时能够显示出来，自己向后台请求到数据之后，赋值给了default-checked-keys中的变量，是数组形式，可是页面中就是不显示，然而，写成静态的数组就能显示在页面中，实在不明白原理，希望知道的大神们能够指点一下。相关代码如下：
template中内容：

                        <el-tree
                          :data="user_role"
                          show-checkbox
                          node-key="user_id"
                          :default-expanded-keys="[2, 3]"
                          :default-checked-keys="checkedStaffIds"
                           :filter-node-method="filterNodeBefore"
                          :props="defaultProps"
                            ref="editStaff"
                          >
                        </el-tree>

js部分：

    getUser(){
            let self = this;
            console.log(this.EditForm.id);
            axios.get('/role/showUser',{
                params:{
                    role_id:this.EditForm.id
                        }
                    }
                ).then(function(response){
                    self.checkedStaffIds = response.data.contents.look_user;
                    console.log(self.checkedStaffIds);
            })
        },

数据格式：

clipboard.png

上面赋值给checkedStaffIds 没有用，但是在data数据中直接写成下面这样却可以绑定成功：

clipboard.png

求教求教~

回答：

是不是你异步请求前就初始化了tree 你可以加上个v-if判断 默认checked有值后再加载组件

回答：

default-checked-keys是初始化加载的时候用的，可能你数据请求到的时候树组件已经加载完成了，这时候改变default-checked-keys的值就没有用了。

需要通过this.$refs.tree.setCheckedNodes来设置选中节点

以上是 【element-ui】element ui 的树形组件绑值问题 的全部内容， 来源链接： utcz.com/a/152443.html

回到顶部