layui cascader可选任意一级的级联下拉框组件

需求是级联框能选择任意层级的节点,但是cascader目前只支持选择叶子节点(最后一级)。那么如何实现这个需求。

思考得出了以下几个方向:

1.更换一个有选择任意一级功能的级联库:

目前找到只有elementUI的级联,缺点与当前项目框架、api有差异,切换有一定成本

2.自己手动造一个轮子

缺点是开发成本最高,给的时间不多,撸出来后需要考虑很多因素、测试等等

3.在当前cascader源码上直接附加功能:

阅读源码后发现代码量不大,新增功能成本相对较低,最后选择了这个方法。最后通过一番寻找发现了这个组件可以参与开源贡献。最后实现这个需求并进行了测试。然后给cascader作者提交了自己的代码,最后也允许通过了(也是非常的开心)。
github地址(希望能给个start支持一下):https://github.com/booms21/la...

layui cascader可选任意一级的级联下拉框组件_第1张图片
使用方法:

1.引入layui
2.引入cascader及css,并在使用的时候使用layui关联包含这个模块
3.传入属性canParentSelect:true,默认为false
       var cas=cascader({
                elem: "#a",
                data: data,//树结构
                // url: "/aa",
                // type: "post",
                // triggerType: "change",
                // showLastLevels: true,
                // where: {
                //     a: "aaa"
                // },
                value: ["B", "BB2", "BBB4"],
                // changeOnSelect: true,
                 canParentSelect:true,//是否可选择任意一级,同时也能用在懒加载
                success: function (valData,labelData) {
                    console.log(valData,labelData);
                }
            });

你可能感兴趣的:(layui cascader可选任意一级的级联下拉框组件)