VueJS 的树形下拉框组件

更新日期: 2018-12-11 阅读次数: 18647 分类: 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

爱评论不评论

近期节日

2020年04月01日 愚人节
2020年04月02日 国际儿童图书日
2020年04月03日 寒食节
2020年04月04日 清明节
2020年04月07日 世界卫生日
2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
查看更多节日