layui 多选下拉选项 第三方 xm-select 问题合集

摘要

又到了layui日常采坑系列,这次是使用的是始于 layui 的一个多选解决方案,前身 formSelects, 由于渲染速度慢, 代码冗余, 被放弃了，这里其实要吐槽一下自己，用了formSelects之后发现这是一个被舍弃的工具,心里就很难受，因为要花额外的精力改代码,当然改完,心情还是愉悦的,xm-select使用了新的开发方式, 利用preact进行渲染, 大幅度提高渲染速度, 并且可以灵活拓展。
我在用一个新的第三方插件时,大部分时间都在看文档,下面就是我一整天的心情
https://maplemei.gitee.io/xm-select/#/component/install 文档在此速速拿走

遇到的问题（后续有再更新）

1. 获取节点值,父节点无法获取

这个问题我很痛，因为我是看了一下午文档，才发现在5个月前Gitee的Issues板块中作者已经回答了类似问题,
gitee地址：https://gitee.com/maplemei/xm-select

所以多选下拉列表在初始化时strict默认为true,设置为false问题就解决了

2、导入注意点

导入外部文件如果采用layui的extend方式导入，例如下方代码，

<script type="text/javascript">
    layui.config({
        base: '../dist/layuiadmin' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        treeTable: '../treetable-lay/treeTable',
        treeSelect: '/treeSelect/treeSelect'
    }).use(['index', 'treeTable', 'table', 'layer','form'], function () {...}
    
</script>

extend的目录默认放在modules下

为了更好的管理导入的js文件，我的是在列表页面导入。编辑页面使用，以下是编辑页面代码

<script th:inline="javascript">
    layui.use(['form','xmSelect'], function () {
        var form = layui.form,
            xmSelect = layui.xmSelect;

        form.render();

        let roleIds = [[${role.menuIds}]];
        let nodes = [[${nodes}]];

        let roleSelect = xmSelect.render({
            el: '#xm-select',
            tips: '请为角色赋予菜单权限',
            autoRow: true,
            filterable: true,
            height: '300px',//'auto',
            name: 'menuIds',
            tree: {
                show: true,
                showFolderIcon: true,
                showLine: true,
                simple: true,
                indent: 20,
                expandedKeys: roleIds == null ? [-1] : roleIds,
                strict:false
            },
            toolbar: {
                show: true,
                list: ['ALL', 'REVERSE', 'CLEAR']
            },
            model: {
                label: {
                    type: 'block',
                    block: {
                        //最大显示数量, 0:不限制
                        showCount: 1,
                        //是否显示删除图标
                        showIcon: true,
                        template: function(item, sels){
                            return item.type == 1 ? '' + item.name : '' + item.name;
                        },
                    }

                }
            },
            data:nodes
        })

        roleSelect.append(roleIds);

        //自定义验证规则
        form.verify({
            chooseSelect: function (value, item) {
                if (roleSelect.getValue('value').length == 0) {
                    return '请为角色赋予菜单权限';
                }
            }
        });

    });
</script>

小结

如果大家有用到xm-select遇到问题可以一起讨论，至少我在用的时候只遇到了这个问题,评论看到会及时回复