需求是级联框能选择任意层级的节点,但是cascader目前只支持选择叶子节点(最后一级)。那么如何实现这个需求。
思考得出了以下几个方向:
1.更换一个有选择任意一级功能的级联库:
目前找到只有elementUI的级联,缺点与当前项目框架、api有差异,切换有一定成本
2.自己手动造一个轮子
缺点是开发成本最高,给的时间不多,撸出来后需要考虑很多因素、测试等等
3.在当前cascader源码上直接附加功能:
阅读源码后发现代码量不大,新增功能成本相对较低,最后选择了这个方法。最后通过一番寻找发现了这个组件可以参与开源贡献。最后实现这个需求并进行了测试。然后给cascader作者提交了自己的代码,最后也允许通过了(也是非常的开心😄)。
github地址(希望能给个start支持一下🙏):https://github.com/booms21/la...
使用方法:
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);
}
});