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 聊聊,或者关注我的个人公众号“大象工具”, 查看更多联系方式