仿element-ui cascader级联选择器，layui cascader级联选择器

前言由于项目中使用的不是vue的框架，但是又需要用到cascader组件，可惜找了很久都没有找到想要的效果，只好自己写组件了。为了力求和element-ui的级联效果一致，来自后端开发的我亲自操刀，哈哈哈！！使用示例引入<html><head><link rel="stylesheet" type="text/css" href="https://www.layuic

一夏coco

4857人浏览 · 2021-09-09 17:56:06

一夏coco · 2021-09-09 17:56:06 发布

前言

由于项目中使用的不是vue的框架，但是又需要用到cascader组件，可惜找了很久都没有找到想要的效果，只好自己写组件了。为了力求和element-ui的级联效果一致，来自后端开发的我亲自操刀，哈哈哈！！

使用示例

引入

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="./cascader/cascader.css"/>
		<script src="https://www.layuicdn.com/layui/layui.js"></script>
		<script src="./cascader/cascader.js"></script>
	</head>
	<body>
	<input id="demo"/>
	/* 如果使用script的方式没办法加载cascader.js文件，则使用
	layui.extend({
	    layCascader: '/cascader/cascader'
	}).use(['layCascader'], function () {
	    ...
	}这种方式加载
	*/
	layui.use('layCascader', function () {
	    var layCascader = layui.layCascader;
	    layCascader({
	      elem: '#demo',
	      options: options
	    });
	});
	</body>
</html>

基本用法

在这里插入图片描述

禁用选项

在这里插入图片描述

多选、折叠

在这里插入图片描述

选择任意一级

在这里插入图片描述

可搜索

在这里插入图片描述

动态加载

在这里插入图片描述

API

Attributes

参数	说明	类型	可选值	默认值
elem	绑定元素	String/jqueryObject/DOM	-	-
value	预设值	Object/Array	-	null
options	可选项数据源，键名可通过 props 属性配置	Array	-	[]
empty	无匹配选项时的内容	String	-	‘暂无数据’
placeholder	输入框占位文本	String	-	‘请选择’
disabled	是否禁用	Boolean	true / false	false
clearable	是否支持清空选项	Boolean	true / false	false
showAllLevels	输入框中是否显示选中值的完整路径	Boolean	true / false	true
collapseTags	多选模式下是否折叠Tag	Boolean	true / false	false
minCollapseTagsNumber	最小折叠标签数	Number	-	1
separator	选项分隔符	String	-	’ / ’
filterable	是否可搜索选项	Boolean	true / false	false
filterMethod	自定义搜索逻辑，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中	Function	-	-
debounce	搜索关键词输入的去抖延迟，毫秒	Number	-	300
beforeFilter	筛选之前的钩子，参数为输入的值，若返回 false,则停止筛选	Function	-	-
popperClass	自定义浮层类名	String	-	‘’
extendClass	继承class样式	Boolean	true / false	false
extendStyle	继承style样式	Boolean	true / false	false

Props

参数	说明	类型	可选值	默认值
expandTrigger	次级菜单的展开方式	String	click / hover	‘click’
multiple	是否多选	Boolean	true / false	false
checkStrictly	是否严格的遵守父子节点不互相关联	Boolean	true / false	false
lazy	是否动态加载子节点，需与 lazyLoad 方法结合使用	Boolean	true / false	false
lazyLoad	加载动态数据的方法，仅在 lazy 为 true 时有效	Function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用)	-	-
value	指定选项的值为选项对象的某个属性值	String	-	‘value’
label	指定选项标签为选项对象的某个属性值	String	-	‘label’
children	指定选项的子选项为选项对象的某个属性值	String	-	‘children’
disabled	指定选项的禁用为选项对象的某个属性值	String	-	‘disabled’
leaf	指定选项的叶子节点的标志位为选项对象的某个属性值	String	-	‘leaf’

Event

方法名	说明	参数
setOptions	设置当前选项	Array
setValue	覆盖当前值.单选时传对象，多选时传数组	单选：Object/String/Number 多选：Array
change	当节点变更时，执行回调多选时，参数是一个数组	单选：function(value,Node){} 多选：function(values,Nodes){}
disabled	禁用组件	Boolean
blur	收起面板	-
focus	展开面板	-
getCheckedNodes	获取选中的节点，如需获取路径，使用node.path获取,将获取各级节点的node对象	-
getCheckedValues	获取选中的值	-
clearCheckedNodes	清空选中的节点	-

链接

演示地址
 gitee地址
 github地址

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^