element实现树形选择器,支持多选、回显正常显示

element有tree树形控件和select下拉选择器,但是,没有树形选择器。使用过ant vue的朋友会知道,它的组件库中有很完善的树形选择器。在实际项目中,树形选择器常用来做…

element有tree树形控件和select下拉选择器,但是,没有树形选择器。使用过ant vue的朋友会知道,它的组件库中有很完善的树形选择器。在实际项目中,树形选择器常用来做一些复杂分类(包含下级)和角色权限管理选择等。

本文仅在参考文章基础上根据实际项目进行了props值的预设,以及解决了选择器回显的问题

element实现树形选择器,支持多选、回显正常显示

相关问题

我在个人博客文章进行编辑分类时,发现传入的选中数组值,tree选择器未显示选中值。

解决过程

一番调试后,我发现是传入的数组值没有触发tree的check-change方法

既然找到问题所在,那就容易解决了。我先是尝试直接调用handleCheckChange方法,发现不起作用,再使用 this.$nextTick的方式,还是不起作用。最后,只能动用大招使用延时来获取DOM元素值了。

这里,我知道是因为在传入数组值设置keys时,未获取到相应的dom节点元素,所以无法触发el-tree组件的check-change方法。但相关原理知识,我还是不太理解,不知道各位大神,能否给小羽解惑哦~

别着急,下文有完整代码哦。

总结延伸

遗留问题

  1. tree选择器单选时,当传入的值为数组、字符串等格式,控制台都会有警告信息;
  2. tree选择器支持搜索过滤

完整代码

tree树形选择器组件封装

调用组件

其他功能,建议多看一下element下tree组件的api。

参考资料

【树形选择器封装】https://blog.csdn.net/sleepwalker_1992/article/details/87894588

【树形选择器回显问题解决】https://blog.csdn.net/jasmine0178/article/details/103600508

如果您喜欢本站分享的资源,点击这儿捐赠我们

这些信息可能会帮助到你: 外卖赚钱 | 进站必看

原创文章,作者:宋小羽,如若转载,请注明出处:https://res.bysjb.cn/element-tree.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注