VueJS 的树形下拉框组件

更新日期: 2018-12-11 阅读次数: 18066 分类: 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 聊聊。 白天工地搬砖,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年02月24日 第三世界青年日
2020年02月24日 龙抬头
2020年02月28日 世界居住条件调查日
2020年03月01日 国际海豹日
2020年03月03日 全国爱耳日
2020年03月05日 学雷锋日
2020年03月05日 惊蛰
2020年03月08日 三八妇女节
2020年03月12日 植树节
2020年03月14日 白色情人节
2020年03月15日 消费者权益日
2020年03月17日 国际航海日
查看更多节日