VueJS 的树形下拉框组件

更新日期: 2018-12-11 阅读次数: 26251 分类: 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 聊聊, 查看更多联系方式