layui xm-select的使用

一、文档

xm-select

二、使用

html 复制代码
<div id="js-form-tags{$ke}{$index++}" val="{$ke}"></div>
<input type="hidden" class="selectkey" name="selectkey[]" value="{$ke}" />
javascript 复制代码
function initSelect(id,init)
        {
            
            xmSelect.render({
                el: '#'+id, 
                model: { label: { type: 'text' } },
                tree: {
                    show: true,
                    showFolderIcon: true,
                    showLine: true,
                    indent: 20,
                    expandedKeys: [ -3 ],
                    strict: false,// 严格父子结构,true时,父级选中和取消选中其子级同步取消和选中;false时,父级不会影响子级的选中,注意位置在内层
                },
                radio: true,//控制单选和多选
                expandedKeys: [],
                clickClose: true,
                language: 'zn',
                size: 'mini',
                single: true,
                style:{width:'215px',border: '1px solid #468',minHeight:'22px'},
                theme: {
                    color: '#1E9FFF',
                },
                show(){
                    console.log('show')
                    
                },
                on(data){
                    console.log(data)
                    console.log('on')
                    console.log($(this))
                    $("#"+id).siblings('input').val(data.change[0].value)
                },
                hide(){
                    console.log('hide')
                    setTimeout(() => {
                        $("#"+id).find('xm-select').css('border','1px solid #468')
                    }, 1);
                },
                initValue: [init],// 下拉框需要有初始选中值时,赋值此项
                height: '200px',
                searchTips: '搜索',// 是否显示搜索框
                filterable: true,// 是否显示搜索框
                toolbar: {
                    show: false,
                    list: ['ALL','CLEAR']
                },// 是否显示清空和全选
                data: JSON.parse(tags)
            })
        }
相关推荐
quan263124 分钟前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
GIS之路25 分钟前
GDAL 读取影像元数据
前端
qb1 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖1 小时前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯1 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰1 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f1 小时前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖1 小时前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰1 小时前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
NewChapter °1 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app