关于级联选择器懒加载的问题。
用的是laycascader,仿照的elementUI中的级联选择器。 https://gitee.com/yixiacoco/lay_cascader
在项目使用中,接口返回的是省市区这样的级联选择,但每个省返回的层级是不一样的,不知道该怎么控制leaf。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://chengxiaokong.com/casca/layui/layui.css" />
<link rel="stylesheet" href="http://chengxiaokong.com/casca/cascader/cascader.css" />
<title></title>
</head>
<body>
<!-- 主体 -->
<div class="main">
<input id="aaaaa" />
</div>
<script src="http://chengxiaokong.com/casca/jquery-3.5.1.min.js"></script>
<script src="http://chengxiaokong.com/casca/layui/layui.js?"></script>
<script src="http://chengxiaokong.com/casca/cascader/cascader.js?"></script>
<script type="text/javascript">layui.use(['layCascader'], function () {
var $ = layui.$;
var layCascader = layui.layCascader;
var dataFrom =
{
"first":
[
{ "value": "bj", "label": "北京" },
{ "value": "hb", "label": "湖北" }
],
"hb":
[
{ "value": "wh", "label": "武汉" }
],
"wh":
[
{ "value": "wc", "label": "武昌" }
],
"bj":
[
{ "value": "hd", "label": "海淀" }
]
}
layCascader({
elem: document.getElementById("aaaaa"),
props: {
strictMode: true,
lazy: true,
lazyLoad: function (node, resolve) {
var data = node.data == undefined ? dataFrom["first"] : dataFrom[node.data.value];
var nodes = data.map(function (selitem) {
return {
value: selitem.value,
label: selitem.label,
leaf: false
}
});
resolve(nodes);
}
}
});
})</script>
</body>
</html>
代码中,北京是两级,湖北是三级。数据源中也不会告知是否是最后一级,也不能在点击第二级获取第三级时,查询所有的第三级下是否还有第四级来提前确认leaf的值是true还是false,实际使用中这个查询会比较耗时。尝试在点击第三级时,通过 node["data"]["leaf"] = true;来让第三级变成叶子节点,但没有效果,之前没用过,实在想不出怎么解决了,谢谢各位帮忙。