VueJS 的树形下拉框组件

更新日期: 2018-12-11 阅读次数: 16724 分类: VueJS

现实场景

多级分类,且大分类下的二级分类中,存在同名二级分类的问题。在添加产品时,从线性单列下拉框中选择对应的子分类非常困难,甚至可以说是 mission impossible。

那么,层级化的树形下拉框组件就非常合适了。

网上找了个 VueTreeselect 组件,网址 https://vue-treeselect.js.org/

是用 VueJS 实现的一个组件。

无法通过 ajax 初始化数据

通过 ajax 拉取的后台数据,在前端怎么也展示不出来。

原来 options 只能在初始化时设置,在之后通过 ajax 回调中赋值是无效的。。。负分!

无法选择父级节点

去掉下面的配置

:disable-branch-nodes="true"

动态加载 options 的方法

例如 ajax 拉取选项,写了个 demo,只需要把 handler 里的处理逻辑换成 ajax 即可

https://codepen.io/sunzhongwei/pen/QmrRzY?editors=1111

参考

  • https://vue-treeselect.js.org/
  • https://codepen.io/riophae/pen/MExgzP

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天工地搬砖,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2019年11月22日 小雪
2019年11月22日 感恩节
2019年11月29日 黑色星期五
2019年12月01日 世界艾滋病日
2019年12月03日 国际残疾人日
2019年12月07日 大雪
2019年12月09日 "一二九"运动纪念日
2019年12月09日 世界足球日
2019年12月10日 世界人权日
2019年12月12日 西安事变纪念日
2019年12月13日 南京大屠杀
2019年12月20日 澳门回归日
查看更多节日