配置项与方法

配置项

参数说明类型可选值默认值
el渲染对象, css选择器, dom元素string--
language语言选择stringzn / enzn
data显示的数据array-[ ]
content自定义下拉框htmlstring--
initValue初始化选中的数据, 需要在data中存在array-null
tips默认提示, 类似于placeholderstring-请选择
empty空数据提示string-暂无数据
filterable是否开启搜索booleantrue / falsefalse
searchTips搜索提示string-请选择
delay搜索延迟 msint-500
filterMethod搜索回调函数function(val, item, index, prop) val: 当前搜索值, item: 每个option选项, index: 位置数据中的下标, prop: 定义key--
filterDone搜索完成函数function(val, list) val: 当前搜索值, list: 过滤后的数据--
remoteSearch是否开启自定义搜索 (远程搜索)booleantrue / falsefalse
remoteMethod自定义搜索回调函数function(val, cb, show, pageIndex) val: 当前搜索值, cb(arr, totalPage): 回调函数, 需要回调一个数组, 结构同data, 远程分页需要第二个参数: 总页码, show: 下拉框显示状态, pageIndex: 分页下当前页码--
direction下拉方向stringauto / up / downauto
style自定义样式object-{ }
height默认最大高度string-200px
paging是否开启自定义分页booleantrue / falsefalse
pageSize分页条数int-10
pageEmptyShow分页无数据是否显示booleantrue / falsetrue
pageRemote是否开启远程分页booleantrue / falsetrue
radio是否开启单选模式booleantrue / falsefalse
repeat是否开启重复性模式booleantrue / falsefalse
clickClose是否点击选项后自动关闭下拉框booleantrue / falsefalse
prop自定义属性名称, 具体看下表object-
theme主题配置, 具体看下表object-
model模型, 多选的展示方式, 具体见下表object-
iconfont自定义选中图标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表单提交时的namestring-select
layVerify表单验证, 同layui的lay-verifystring-''
layVerType表单验证, 同layui的lay-verTypestring-''
layReqText表单验证, 同layui的lay-reqTextstring-''
toolbar工具条, 具体看下表object--
showCount展示在下拉框中的最多选项数量int-0
enableKeyboard是否启用键盘操作选项booleantrue / falsetrue
enableHoverFirst是否默认选中第一项booleantrue / falsetrue
selectedKeyCode选中的键盘KeyCodeint全部KeyCode, 也可xmSelect.KeyCode.Enter,xmSelect.KeyCode.Space13
autoRow是否开启自动换行(选项过多时)booleantrue / falsefalse
size尺寸stringlarge / medium / small / minimedium
disabled是否禁用多选booleantrue / falsefalse
create创建条目function(val, data), val: 搜索的数据, data: 当前下拉数据-null
tree树形结构, 具体看下表object--
cascader级联结构, 具体看下表object--
submitConversion配置表单提交数据function(sels, prop), sels: 已选中数据, prop: 自定义的prop--
done渲染完成回调function--

prop

参数说明类型可选值默认值
name显示名称string-name
value选中值, 当前多选唯一string-value
selected是否选中string-selected
disabled是否禁用string-disabled
children分组childrenstring-children
optgroup分组optgroupstring-optgroup

分组说明

如果children属性为数组的时候开启分组模式

{name: '销售员', children: [
	{name: '李四', value: 4, selected: true},
	{name: '王五', value: 5},
]},

//可在分组上定义click属性, 来定义点击事件
{name: '选中', children: [...], click: 'SELECT'},
{name: '清空', children: [...], click: 'CLEAR'},
{name: '自动', children: [...], click: 'AUTO'},
{name: '自定义', children: [...], click: function(item){
	alert('自定义的, 想干嘛干嘛');
}},

theme

参数说明类型可选值默认值
color主题颜色string-#009688
maxColor选中上限闪烁边框颜色string-#e54d42
hover键盘操作的背景色string-#f2f2f2

model

目前仅配置label即可

model: {
	//是否展示复选框或者单选框图标 show, hidden:变换背景色
	icon: 'show',
	label: {
		//使用方式
		type: 'block',
		//使用字符串拼接的方式
		text: {
			//左边拼接的字符
			left: '',
			//右边拼接的字符
			right: '',
			//中间的分隔符
			separator: ', ',
		},
		//使用方块显示
		block: {
			//最大显示数量, 0:不限制
			showCount: 0,
			//是否显示删除图标
			showIcon: true,
			//自定义渲染label, 默认渲染name, 回调参数(item, sels)
			template: null,
		},
		//自定义文字
		count: {
			//函数处理
			template(data, sels){
				//data: 所有的数据
				//sels: 选中的数据
				return `已选中 ${sels.length} 项, 共 ${data.length}`
			}
		},
	},
	//展示类型, 下拉框形式: absolute, 直接显示模式: relative, 浮动布局: fixed
	type: 'absolute', 
},

iconfont

参数说明类型可选值默认值
select选中图标string--
unselect非选中图标string--
half半选图标string--
parent父节点图标, 值为hidden时, 隐藏string--

toolbar

参数说明类型可选值默认值
show是否展示工具条booleantrue / falsefalse
showIcon是否显示工具图标booleantrue / falsetrue
list工具条数组 (默认有 全选/清空, 可以自定义), 还有 REVERSE:反选arrayALL, CLEAR, REVERSE[ "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 当前页面的数据
			
		}
	} 
]

tree

参数说明类型可选值默认值
show是否展示为树状结构booleantrue / falsefalse
showFolderIcon是否显示节点前的三角图标booleantrue / falsetrue
showLine是否显示虚线booleantrue / falsetrue
indent间距int-20
expandedKeys默认展开的节点数组, 为true时展开所有节点array / boolean-[ ]
strict是否遵循严格父子结构booleantrue / falsetrue
simple是否开启极简模式booleantrue / falsefalse
nodeType标注节点类型的keystringleaf: 叶子节点, parent: 父节点, half: 半选节点__node_type
clickExpand点击节点是否展开, false时点击三角箭头进行展开操作booleantrue / falsetrue
clickCheck点击节点是否选中, false时点击复选框进行选中操作booleantrue / falsetrue

cascader

参数说明类型可选值默认值
show是否展示为级联结构booleantrue / falsefalse
indent每一级的宽度int-100
strict是否遵循严格父子结构booleantrue / falsetrue

全局方法

事件名说明参数返回值
render渲染多选(options: 配置项)实例对象
get获取页面中已经渲染的多选(filter: 过滤el, single: 是否返回单实例)符合条件的实例数组
batch批量操作已渲染的多选(filter: 过滤el, method: 方法, ...方法参数)符合条件的实例数组
arr2tree把列表数据转化为树状结构(arr: 数据, pid: 父节点ID的key, id: 对应key, children: 对应key, topParentId: 顶级节点的ID)符合条件的数组
//render 使用方式
xmSelect.render(OPTIONS);

//get 使用方式
xmSelect.get('#demo1');	 //指定某一个获取
xmSelect.get(/.*demo1.*/);  //正则获取
//自定义方法获取
xmSelect.get(function(el){
	return el == '#demo1' || el == '#demo2';
});  
//单实例
xmSelect.get('#demo2', true);

//batch 使用方式
//批量执行禁用
xmSelect.batch(/.*demo/, 'update', {
	disabled: true,
});   
//批量执行warning
xmSelect.batch(/.*demo/, 'warning', '#F00', true);   

实例方法

注意

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: 是否持续显示)
getTreeValue树节点模式下获取数据, v1.2.0 新增(leafOnly: 是否只是叶子节点,默认值为 false, includeHalfChecked: 是否包含半选节点,默认值为 false)
changeExpandedKeys树模式下更新节点展开状态, v1.2.0 新增(keys: true-全部展开, false-全部关闭, 数组-展开的节点值)
enable启用选项, disabled=false, v1.2.0 新增(array: 想要启用的选项数组)
disable禁用用选项, disabled=true, v1.2.0 新增(array: 想要禁用的选项数组)
calcPositionfixed布局模式下重新计算位置, v1.2.2 新增-
上次更新:
贡献者: leedom