基础用法
默认 click 触发子菜单

代码

<input id="demo1"/>
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#demo1',
      options: options
    });
});
hover 触发子菜单

代码

<input id="demo2"/>
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#demo2',
      options: options,
      props: {
        expandTrigger: 'hover'
      }
    });
});
默认 click 触发子菜单-监听选中变更

代码

<input id="demo1_1"/>
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    var demo1_1 = layCascader({
      elem: '#demo1_1',
      options: options
    });
    demo1_1.changeEvent(function (value, node) {
      layer.msg('value:' + value + ',Node:' + JSON.stringify(node.data));
    });
});
hover 触发子菜单-获取当前选中值

代码

<input id="demo2_1"/>
<button id="demo2_1_click" type="button" class="layui-btn layui-btn-primary layui-border-blue">获取当前选中值</button>
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    var demo2_1 = layCascader({
      elem: '#demo2_1',
      options: options,
      props: {
        expandTrigger: 'hover'
      }
    });
    $('#demo2_1_click').click(function () {
      // 这里是单选，获取的是一个值，如果是多选则是一个数组
      var value = demo2_1.getCheckedValues();
      var node = demo2_1.getCheckedNodes();
      if (!value) {
        layer.msg('未选中值');
        return;
      }
      layer.msg('value:' + value + ',Node:' + JSON.stringify(node.data));
    });
});
禁用选项
通过在数据源中设置 disabled 字段来声明该选项是禁用的

代码

<input id="demo3"/>
/*本例中，options指定的数组中的第一个元素含有disabled: true键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的disabled字段是否为true，如果你的数据中表示禁用含义的字段名不为disabled，可以通过props.disabled属性来指定（详见下方 API 表格）。当然，value、label和children这三个字段名也可以通过同样的方式指定。*/
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    var options = [{
        value: 'zhinan',
        label: '指南',
        disabled: true,
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'zujian',
        label: '组件',
        children: [{
          value: 'basic',
          label: 'Basic',
          children: [{
            value: 'layout',
            label: 'Layout 布局'
          }, {
            value: 'color',
            label: 'Color 色彩'
          }, {
            value: 'typography',
            label: 'Typography 字体'
          }, {
            value: 'icon',
            label: 'Icon 图标'
          }, {
            value: 'button',
            label: 'Button 按钮'
          }]
        }, {
          value: 'form',
          label: 'Form',
          children: [{
            value: 'radio',
            label: 'Radio 单选框'
          }, {
            value: 'checkbox',
            label: 'Checkbox 多选框'
          }, {
            value: 'input',
            label: 'Input 输入框'
          }, {
            value: 'input-number',
            label: 'InputNumber 计数器'
          }, {
            value: 'select',
            label: 'Select 选择器'
          }, {
            value: 'cascader',
            label: 'Cascader 级联选择器'
          }, {
            value: 'switch',
            label: 'Switch 开关'
          }, {
            value: 'slider',
            label: 'Slider 滑块'
          }, {
            value: 'time-picker',
            label: 'TimePicker 时间选择器'
          }, {
            value: 'date-picker',
            label: 'DatePicker 日期选择器'
          }, {
            value: 'datetime-picker',
            label: 'DateTimePicker 日期时间选择器'
          }, {
            value: 'upload',
            label: 'Upload 上传'
          }, {
            value: 'rate',
            label: 'Rate 评分'
          }, {
            value: 'form',
            label: 'Form 表单'
          }]
        }, {
          value: 'data',
          label: 'Data',
          children: [{
            value: 'table',
            label: 'Table 表格'
          }, {
            value: 'tag',
            label: 'Tag 标签'
          }, {
            value: 'progress',
            label: 'Progress 进度条'
          }, {
            value: 'tree',
            label: 'Tree 树形控件'
          }, {
            value: 'pagination',
            label: 'Pagination 分页'
          }, {
            value: 'badge',
            label: 'Badge 标记'
          }]
        }, {
          value: 'notice',
          label: 'Notice',
          children: [{
            value: 'alert',
            label: 'Alert 警告'
          }, {
            value: 'loading',
            label: 'Loading 加载'
          }, {
            value: 'message',
            label: 'Message 消息提示'
          }, {
            value: 'message-box',
            label: 'MessageBox 弹框'
          }, {
            value: 'notification',
            label: 'Notification 通知'
          }]
        }, {
          value: 'navigation',
          label: 'Navigation',
          children: [{
            value: 'menu',
            label: 'NavMenu 导航菜单'
          }, {
            value: 'tabs',
            label: 'Tabs 标签页'
          }, {
            value: 'breadcrumb',
            label: 'Breadcrumb 面包屑'
          }, {
            value: 'dropdown',
            label: 'Dropdown 下拉菜单'
          }, {
            value: 'steps',
            label: 'Steps 步骤条'
          }]
        }, {
          value: 'others',
          label: 'Others',
          children: [{
            value: 'dialog',
            label: 'Dialog 对话框'
          }, {
            value: 'tooltip',
            label: 'Tooltip 文字提示'
          }, {
            value: 'popover',
            label: 'Popover 弹出框'
          }, {
            value: 'card',
            label: 'Card 卡片'
          }, {
            value: 'carousel',
            label: 'Carousel 走马灯'
          }, {
            value: 'collapse',
            label: 'Collapse 折叠面板'
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }];
    layCascader({
        elem: '#demo3',
        options: options
    });
});
可清空
通过 clearable 设置输入框可清空

代码

<input id="demo4"/>
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#demo4',
      clearable: true,
      options: options
    });
});
多选
可通过 props.multiple = true 来开启多选模式
默认显示所有Tag

代码

<input id="demo5"/>
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#demo5',
      clearable: true,
      options: options,
      props: {
        multiple: true
      }
    });
});
折叠展示Tag

代码

<input id="demo6"/>
//在开启多选模式后，默认情况下会展示所有已选中的选项的Tag，你可以使用collapseTags来折叠Tag
//默认情况下折叠仅展示一条tag，你可以使用minCollapseTagsNumber来指定最小tag
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#demo6',
      clearable: true,
      collapseTags: true,
      minCollapseTagsNumber: 2,
      options: options,
      props: {
        multiple: true
      }
    });
});
选择任意一级选项
在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项。
可通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。
单选选择任意一级选项

代码

<input id="demo7"/>
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#demo7',
      clearable: true,
      options: options,
      props: {
        checkStrictly: true
      }
    });
});
多选选择任意一级选项

代码

<input id="demo8"/>
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#demo8',
      clearable: true,
      options: options,
      props: {
        multiple: true,
        checkStrictly: true
      }
    });
});
仅显示最后一级
可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。
属性showAllLevels定义了是否显示完整的路径，将其赋值为false则仅显示最后一级
仅显示最后一级

代码

<input id="demo9"/>
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
     layCascader({
      elem: '#demo9',
      showAllLevels: false,
      options: options
    });
});
可搜索
将filterable赋值为true即可打开搜索功能，默认会匹配节点的label或所有父节点的label(由showAllLevels决定)中包含输入值的选项。你也可以用filterMethod自定义搜索逻辑，接受一个函数，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中。
单选可搜索

代码

<input id="demo10"/>
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
        elem: '#demo10',
        clearable: true,
        filterable: true,
        options: options
    });
});
多选可搜索

代码

<input id="demo11"/>
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
        elem: '#demo11',
        clearable: true,
        filterable: true,
        options: options,
        props:{
            multiple: true
        }
    });
});
单选无关联可搜索

代码

<input id="demo12"/>
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#demo12',
      filterable: true,
      clearable: true,
      options: options,
      props: {
        checkStrictly: true
      }
    });
});
多选无关联可搜索

代码

<input id="demo13"/>
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#demo13',
      options: options,
      filterable: true,
      clearable: true,
      props: {
        checkStrictly: true,
        multiple: true
      }
    });
});
回显
单选回显

代码

<input id="danXuanHuiXian"/>
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#danXuanHuiXian',
      value: 'dingbudaohang',
      options: options
    });
});
多选回显

代码

<input id="duoXuanHuiXian"/>
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      clearable: true,
      disabledFixed: true,  //固定禁用项，使禁用项不被清理删除，禁用项只能通过函数添加或初始值添加,默认禁用项不可被函数或初始值添加
      props: {
        multiple: true
      },
      elem: '#duoXuanHuiXian',
      value: ['yizhi', 'dingbudaohang', 'layout', 'cexiangdaohang'],
      options: options
    });
});
单选无关联回显

代码

<input id="danXuanHuiXian2"/>
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      props: {
        checkStrictly: true
      },
      elem: '#danXuanHuiXian2',
      value: 'shejiyuanze',
      options: options
    });
});
多选无关联回显

代码

<input id="duoXuanHuiXian2"/>
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      props: {
        multiple: true,
        checkStrictly: true
      },
      disabledFixed: true,  //固定禁用项，使禁用项不被清理删除，禁用项只能通过函数添加或初始值添加,默认禁用项不可被函数或初始值添加
      clearable: true,
      elem: '#duoXuanHuiXian2',
      value: ['shejiyuanze', 'layout', 'cexiangdaohang'],
      options: options
    });
});
多选数量限制
通过maxSize开启多选最大数量限制，该属性对单选无效果。默认值为0，表示的是无限制选中最大个数，大于0则表示限制选中个数。
多选数量限制

代码

<input id="demo15"/>
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      clearable: true,
      maxSize: 3,
      props: {
        multiple: true
      },
      elem: '#demo15',
      options: options
    });
});
动态加载
通过lazy开启动态加载，并通过lazyload来设置加载数据源的方法。lazyload方法有两个参数，第一个参数node为当前点击的节点，第二个resolve为数据加载完成的回调(必须调用)。为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位 (默认字段为leaf，可通过props.leaf修改)，否则会简单的以有无子节点来判断是否为叶子节点。

代码

<input id="demo14"/>
layui.use('layCascader', function () {
    var id = 0;
    // 动态加载
    layCascader({
      elem: '#demo14',
      props: {
        lazy: true,
        lazyLoad: function(node, resolve) {
          var level = node.level;
          setTimeout(function () {
            var nodes = Array.from({length: level + 2})
              .map(function (item) {
                return {
                  value: ++id,
                  label: '选项' + id,
                  leaf: level >= 1
                };
              });
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          }, 1000);
        }
      }
    });
});
Attributes
参数 说明 类型 可选值 默认值
elem 绑定元素 String/jqueryObject/DOM - -
value 预设值 Object/Array - null
props 配置选项，具体见下表 Object - -
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
disabledFixed 固定禁用项，使禁用项不被清理删除，禁用项只能通过函数添加或初始值添加,默认禁用项不可被函数或初始值添加 Boolean true / false false
maxSize 多选选中的最大数量，0表示不限制 Number >=0 0
Props
参数 说明 类型 可选值 默认值
strictMode 严格模式,设置value严格按照层级结构.获取的value和Node也将按照层级结构返回.
例如：
多选:[['zhinan','shejiyuanze','yizhi']]
单选:['zhinan','shejiyuanze','yizhi']		 Boolean true / false false
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 覆盖当前值.单选时传对象，多选时传数组 非严格模式下。
单选：options中的value值
多选：options中的value值组成的数组
例如：
layCascader.setValue('yizhi')
layCascader.setValue(['yizhi','table'])
changeEvent 当节点变更时，执行回调
多选时，参数是一个数组		 单选：function(value,Node){}
多选：function(values,Nodes){}
openEvent 当面板打开时，执行回调 function(){}
closeEvent 当面板关闭时，执行回调 function(){}
disabled 禁用组件 Boolean
close 收起面板 -
open 展开面板 -
getCheckedNodes 获取选中的节点，如需获取路径，使用node.path获取,将获取各级节点的node对象。严格模式下返回包含父级的层级结构 -
getCheckedValues 获取选中的值.严格模式下返回包含父级的层级结构 -
clearCheckedNodes 清空选中的节点 Boolean: 是否强制删除固定的禁用项，默认不会清空禁用项
expandNode 展开面板到节点所在的层级 value: 节点值，只能传单个值，不允许传数组
getConfig 获取当前配置副本 -
getData 获取数据对象副本 -