xm-select/docs/mds/ZP02.md

下拉树

eleTree

结合 layui 插件中心的 eleTree, 传送门

:::demo

<div id="demo1" class="xm-select-demo"></div>

<script>
//先渲染多选
var demo1 = xmSelect.render({
    el: '#demo1', 
    theme: {
        color: '#5FB878',
    },
    content: '<div id="ele1" lay-filter="ele1"></div>',
})

//渲染自定义内容
var ele = layui.eleTree.render({
    elem: '#ele1',
    data: [
        {
            id: 1,
            label: "安徽省",
            children: [
                {
                    id: 2,
                    label: "马鞍山市",
                    disabled: true,
                    children: [
                        {
                            id: 3,
                            label: "和县",
                        },
                        {
                            id: 4,
                            label: "花山区",
                        }
                    ]
                }
            ]
        },
        {
            id: 5,
            label: "河南省",
            children: [
                {
                    id: 6,
                    label: "郑州市"
                }
            ]
        }
    ],
    showCheckbox: true,
    defaultExpandAll: true,
});

//监听下拉多选的选择
demo1.update({
   on({ arr, change, isAdd }){
       if(isAdd === false){//监听取消
           ele.setChecked(arr.map(item => item.id), true);
       }
   },
});

//监听树的选择
layui.eleTree.on("nodeChecked(ele1)", function(d) {
    var arr = ele.getChecked(true, false)
    demo1.update({
        prop: {
            name: 'label',
            value: 'id',
        },
        data: arr,
    }).setValue(arr)
})



</script>

:::