持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情

xm-select是下拉选择框的多选的layui三方库，可是说这是我觉着最好用的下拉多选框了。它支持多选、单选、重复选、分组选择、搜索、异步加载、分页等等。几乎囊括了所有的可能存在的场景。

• 开源地址：gitee.com/maplemei/xm…

1、实战

1.1、引入xm-select

<script type="text/javascript" th:src="@{/lib/ui/xm-select/xm-select.js}" charset="utf-8"></script>

1.2、初始化

• 创建下拉框所在容器

<div id="xmSelect"></div>

const deptSelectObj = xmSelect.render({
    el: '#xmSelect',
    //自动换行
    autoRow: true,
    //开启搜索框
    filterable: true,
    //树形结构相关属性
    tree: {
        //以树状结构展示
        show: true,
        showFolderIcon: true,
        //展示虚线
        showLine: true,
        //节点间距
        indent: 20,
    },
    toolbar: {
        //展示工具条 全选/清除这些
        show: true,
        list: ['ALL', 'CLEAR']
    },
    //高度自适应
    height: 'auto',
    //显示的数据，正常使用，我们仅需改成接口调用即可
    data: function(){
        return [
            {name: '奖品', value: -2, children: [
                {name: '奖品3', value: -3, children: [
                    {name: '苹果3', value: 14},
                    {name: '香蕉3', value: 15},
                    {name: '葡萄3', value: 16},
                ]},
                {name: '苹果2', value: 4},
                {name: '香蕉2', value: 5},
                {name: '葡萄2', value: 6},
            ]},
        ]
    }
});

• 动态更新下拉数据

axios({
    method: 'get',
    url: 'https://www.test.com/xmSelect',
}).then(response => {
    let res = response.data;
    deptSelectObj.update({
        data: res.data,
        autoRow: true,
    })
});

• 展示效果：

展示效果还是不错的，可以左右切换图片，主要还是开发起来很快，成本低。

1.3、后端接口

后端组装树形数据时，我们可以通过自行遍历找父节点组装。这里为大家介绍下hutool中的树形数据构造方法，非常方便。

• 引入依赖

<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.6.5</version>
</dependency>

• TreeUtil

//1、获取到所有的标签信息
List<ComTag> allTags = readComTagMapper.getAllTags();
//2、构建树形列表
List<Tree<String>> treeNodes = TreeUtil.build(allTags, ROOT, new TreeNodeConfig(), (comTag, tree) -> {
    //指定ID字段
    tree.setId(comTag.getCom_tag_id());
    //指定父节点ID
    tree.setParentId(comTag.getCom_tag_parent_id());
    //排序
    tree.setWeight(comTag.getSort());
    //名称
    tree.setName(comTag.getTag_name());
    // 扩展属性
    tree.putExtra("tag_type", comTag.getTag_type());
    tree.putExtra("add_time", comTag.getAdd_time());
});
return treeNodes;