## 配置项与方法 ### 配置项 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------------- | ------------------------------ | --------------- | ------ | ------ | | el | 渲染对象, css选择器 | string | - | - | | language | 语言选择 | string | zn / en | zn | | data | 显示的数据 | array | - | [ ] | | content | 自定义下拉框html | string | - | - | | initValue | 初始化选中的数据, 需要在data中存在 | array | - | null | | tips | 默认提示, 类似于placeholder | string | - | 请选择 | | empty | 空数据提示 | string | - | 暂无数据 | | filterable | 是否开启搜索 | boolean | true / false | false | | searchTips | 搜索提示 | string | - | 请选择 | | delay | 搜索延迟 ms | int | - | 500 | | filterMethod | 搜索回调函数 | function(val, item, index, prop) val: 当前搜索值, item: 每个option选项, index: 位置数据中的下标, prop: 定义key | - | - | | filterDone | 搜索完成函数 | function(val, list) val: 当前搜索值, list: 过滤后的数据 | - | - | | remoteSearch | 是否开启自定义搜索 (远程搜索)| boolean | true / false | false | | remoteMethod | 自定义搜索回调函数 | function(val, cb, show) val: 当前搜索值, cb: 回调函数, 需要回调一个数组, 结构同data, show: 下拉框显示状态 | - | - | | direction | 下拉方向| string | auto / up / down | auto | | style | 自定义样式| object | - | { } | | height | 默认最大高度| string | - | 200px | | paging | 是否开启自定义分页 | boolean | true / false | false | | pageSize | 分页条数 | int | - | 10 | | pageEmptyShow | 分页无数据是否显示 | boolean | true / false | true | | radio | 是否开启单选模式 | boolean | true / false | false | | repeat | 是否开启重复性模式 | boolean | true / false | false | | clickClose | 是否点击选项后自动关闭下拉框 | boolean | true / false | false | | prop | 自定义属性名称, 具体看下表 | object | - | | | theme | 主题配置, 具体看下表 | object | - | | | model | 模型, 多选的展示方式, 具体见下表 | object | - | | | show | 展开下拉的回调 | function | - | - | | hide | 隐藏下拉的回调 | function | - | - | | template | 自定义渲染选项 | function({ item, sels, name, value }) | - | - | | on | 监听选中变化 | function({ arr, change, isAdd }) | - | - | | max | 设置多选选中上限 | int | - | 0 | | maxMethod | 达到选中上限的回到 | function(sels, item), sels: 已选中数据, item: 当前选中的值 | - | - | | name | 表单提交时的name | string | - | select | | toolbar | 工具条, 具体看下表 | object | - | - | | showCount | 展示在下拉框中的最多选项数量 | int | - | 0 | | autoRow | 是否开启自动换行(选项过多时) | boolean | true / false | false | | size | 尺寸 | string | large / medium / small / mini | medium | | disabled | 是否禁用多选 | boolean | true / false | false | | create | 创建条目 | function(val, data), val: 搜索的数据, data: 当前下拉数据 | - | null | ### prop | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------------- | ------------------------------ | --------------- | ------ | ------ | | name | 显示名称 | string | - | name | | value | 选中值, 当前多选唯一 | string | - | value | | selected | 是否选中 | string | - | selected | | disabled | 是否禁用 | string | - | disabled | | children | 分组children | string | - | children | | optgroup | 分组optgroup | string | - | optgroup | ### 分组说明 如果children属性为数组, 或者optgroup=true的时候开启分组模式 ``` //平级结构下面的数据为一组 {name: '城市', optgroup: true}, //children下的数组为一组 {name: '销售员', children: [ {name: '李四', value: 4, selected: true}, {name: '王五', value: 5}, ]}, //可在分组上定义click属性, 来定义点击事件 //这里以optgroup模式为例, children模式同理 {name: '选中', optgroup: true, click: 'SELECT'}, {name: '清空', optgroup: true, click: 'CLEAR'}, {name: '自动', optgroup: true, click: 'AUTO'}, {name: '自定义', optgroup: true, click: function(item){ alert('自定义的, 想干嘛干嘛'); }}, ``` ### theme | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | --------- | --------------- | ------ | ------ | | color | 主题颜色 | string | - | #009688 | | maxColor | 选中上限闪烁边框颜色 | string | - | #e54d42 | ### model 目前仅配置label即可 ``` model: { //是否展示复选框或者单选框图标 show, hidden:变换背景色 icon: 'show', label: { //使用方式 type: 'block', //使用字符串拼接的方式 text: { //左边拼接的字符 left: '', //右边拼接的字符 right: '', //中间的分隔符 separator: ', ', }, //使用方块显示 block: { //最大显示数量, 0:不限制 showCount: 0, //是否显示删除图标 showIcon: true, }, //自定义文字 count: { //函数处理 template(data, sels){ //data: 所有的数据 //sels: 选中的数据 return `已选中 ${sels.length} 项, 共 ${data.length} 项` } }, }, }, ``` ### toolbar | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | --------- | --------------- | ------ | ------ | | show | 是否展示工具条 | boolean | true / false | false | | showIcon | 是否显示工具图标 | boolean | true / false | true | | list | 工具条数组 (默认有 全选/清空, 可以自定义), 还有 REVERSE:反选 | array | - | [ "ALL", "CLEAR" ] | > 自定义方式 ``` list: [ "ALL", "CLEAR", { //显示图标, 可以是layui内置的图标, 也可以是自己引入的图标 //传入的icon会转化为 icon: 'layui-icon layui-icon-face-smile', //显示名称 name: 'xxx', //点击时触发的回调 method: function(data){ //data 当前页面的数据 } } ] ``` ### 全局方法 | 事件名 | 说明 | 参数 | 返回值 | | ------ | ------------------ | -------- | -------- | | render | 渲染多选 | (options: 配置项) | 实例对象 | | get | 获取页面中已经渲染的多选 | (filter: 过滤`el`) | 符合条件的实例数组 | | batch | 批量操作已渲染的多选 | (filter: 过滤`el`, method: 方法, ...方法参数) | 符合条件的实例数组 | ``` //render 使用方式 xmSelect.render(OPTIONS); //get 使用方式 xmSelect.get('#demo1'); //指定某一个获取 xmSelect.get(/.*demo1.*/); //正则获取 //自定义方法获取 xmSelect.get(function(el){ return el == '#demo1' || el == '#demo2'; }); //batch 使用方式 //批量执行禁用 xmSelect.batch(/.*demo/, 'update', { disabled: true, }); //批量执行warning xmSelect.batch(/.*demo/, 'warning', '#F00', true); ``` ### 实例方法 :::warning xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用 ::: | 事件名 | 说明 | 参数 | | ------ | ------------------ | -------- | | getValue | 获取当前选中的数据 | (type: 类型), 可选值: name, nameStr, value, valueStr | | setValue | 动态设置数据 | (array: 选中的数据, show: 是否展开下拉,不传默认当前显示状态,取值: true/false, listenOn: 是否触发on的监听, 默认false) | | append | 追加赋值 | (array: 追加的数据) | | delete | 删除赋值 | (array: 删除的数据) | | opened | 主动展开下拉 | - | | closed | 主动关闭下拉 | - | | reset | 重置为上一次的render状态 | - | | update | 更新多选选中, reset不保留 | (options: 见配置项) | | warning | 警告 | (color: 默认同theme.maxColor, sustain: 是否持续显示) |