xm-select/docs/mds/options.md

配置项与方法

配置项

参数	说明	类型	可选值	默认值
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会转化为 <i class="layui-icon layui-icon-face-smile"></i>
        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: 是否持续显示)