vue+elementui-tree树形控件 default-expanded-keys失效及动态绑定问题
问题描述:vue+elementui-tree树形控件 default-expanded-keys失效及动态绑定问题,具体问题场景是这样:做了一个弹窗tree组件,指定了node-key=“id”,同时设置了:default-expanded-keys=“key”,这个key是动态设置值的数组。第一次打开弹窗时,展开没有反应,第二次打开弹窗就生效了。
分析:首先说明一下,要使用default-expanded-keys,需指定node-key,作为你数据中的唯一标识id。这个文档里也有说明。这块没有问题。其次,检查了每次打开,不管是第一次和第二次,key里面都有id数据,后来终于发现问题所在:key里面确实有id数据,但是是字符串类型。而tree的data数据里,id是数字型。问题就出在这里!!!
比如,你加入:default-checked-keys="[1]"属性,数组中的内容1就是你指定的id的值,也就是key的值
但我发现返回key里面的id是字符串类型的,所以只写数字的话不生效 [1]
data: [{
label: '一级 1',
id:1,
children: [{
label: '二级 1-1',
id:11,
}]
}, {
label: '一级 2',
id:2,
children: [{
label: '二级 2-1',
id:22,
}]
}],
上面改成‘1’,‘11’,‘2’,‘22’ 就可以了!
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)