xm-select/docs/mds/ZP03.md

下拉树

layuiTree

结合 layui 的 tree, 传送门

:::demo

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

<script>
var data = [
    { id: 1, title: "安徽省", children: [
        { id: 2, title: "马鞍山市", disabled: true, children: [
            { id: 3, title: "和县" },
            { id: 4, title: "花山区" }
        ]}
    ]},
    { id: 5, title: "河南省", children: [
        { id: 6, title: "郑州市" },
        { id: 7, title: "开封市" },
        { id: 8, title: "焦作市" },
        { id: 9, title: "洛阳市" },
    ]}
]


//先渲染多选
var demo1 = xmSelect.render({
    el: '#demo1', 
    theme: {
        color: '#5FB878',
    },
    content: '<div id="layuiTree"></div>',
    data: data,
    prop: {
        name: 'title',
        value: 'id',
    }
})

//渲染自定义内容
var ele = layui.tree.render({
    id: 'demoId',
    elem: '#layuiTree',
    data: data,
    showCheckbox: true,
    oncheck: function(obj){
        var checkData = layui.tree.getChecked('demoId');
    }
});

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

</script>

:::