# cascader
# 基础用法
<template>
<ykc-cascader
@change="selectChange"
v-model="val0"
:options="data"
:clearable="true"></ykc-cascader>
</template>
<script>
export default {
data() {
return {
val0: [],
// 组件使用数据源
data: [
{
value: 'zhinan',
label: '指南',
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: '组件交互文档',
},
],
},
],
};
},
created() {},
methods: {
/**
* 组件change方法调用信息提示
*/
selectChange(e) {
this.$message(`选择id为${e}的按钮`);
},
},
};
</script>
显示代码 复制代码 复制代码
# 搜索关键字
ykc-cascader 可以快捷地搜索选项并选择。
- 无匹配数据
<template>
<ykc-cascader
@change="selectChange"
v-model="val1"
:options="data"
:filterable="filterable"></ykc-cascader>
</template>
<script>
export default {
data() {
return {
val1: [],
// 组件使用数据源
data: [
{
value: 'zhinan',
label: '指南',
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: '组件交互文档',
},
],
},
],
filterable: true,
};
},
methods: {
/**
* 组件change方法调用信息提示
*/
selectChange(e) {
Message(`选择id为${e}的按钮`);
},
},
};
</script>
显示代码 复制代码 复制代码
# separator分隔符
ykc-cascader 可以选择任意分隔符，默认是"/。
<template>
<ykc-cascader
@change="selectChange"
v-model="val2"
:options="data"
:separator="separator"
:isObject="isObject"></ykc-cascader>
</template>
<script>
export default {
data() {
return {
val2: [],
// 组件使用数据源
data: [
{
value: 'zhinan',
label: '指南',
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: '组件交互文档',
},
],
},
],
separator: ' - ',
isObject: true,
};
},
methods: {
/**
* 组件change方法调用信息提示
*/
selectChange(e) {
Message(`选择id为${e}的按钮`);
},
},
};
</script>
显示代码 复制代码 复制代码
# 单选选中任一层级立刻回填数据
ykc-cascader 可让父子节点取消关联，选择任意一级选项。
<ykc-cascader
@change="selectChange"
v-model="val3"
:options="data"
:config="{ checkStrictly: true }"
:clearable="true"></ykc-cascader>
</template>
<script>
export default {
data() {
return {
val3: [],
// 组件使用数据源
data: [
{
value: 'zhinan',
label: '指南',
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: '组件交互文档',
},
],
},
],
};
},
created() {},
methods: {
/**
* 组件change方法调用信息提示
*/
selectChange(e) {
Message(`选择id为${e}的按钮`);
},
},
};
</script>
显示代码 复制代码 复制代码
# 多选中任一层级立刻回填数据
ykc-cascader 可让父子节点取消关联，选择多个任意一级选项。
<template>
<ykc-cascader
@change="selectChange"
v-model="val4"
:options="data"
:config="{ multiple: true, checkStrictly: true }"
:clearable="true"></ykc-cascader>
</template>
<script>
export default {
data() {
return {
val4: [],
// 组件使用数据源
data: [
{
value: 'zhinan',
label: '指南',
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: '组件交互文档',
},
],
},
],
filterable: true,
};
},
created() {},
methods: {
/**
* 组件change方法调用信息提示
*/
selectChange(e) {
this.$message(`选择id为${e}的按钮`);
},
},
};
</script>
显示代码 复制代码 复制代码
# Attributes
| 参数 | 必填 | 说明 | 类型 | 可选值 | 默认值 | 备注 |
|---|---|---|---|---|---|---|
| options | 是 | 数据源 | Array | — | [] | |
| v-model | 是 | 绑定值 | Boolean / String / Number | — | — | — |
| placeholder | 是 | 占位符 | String | — | 请选择 | — |
| separator | 否 | 分隔符 | String | — | '/' | — |
| filterable | 否 | 是否可搜索选项 | boolean | rue/false | false | — |
| clearable | 否 | 是否可以清空 即是否出现x清除所选数据 | Boolean | true/false | false | — |
| isObject | 否 | 通过change方法获取的值是object还是id单个值 | Boolean | true/false | false | — |
| collapse-tags | 否 | 多选模式下是否折叠Tag | Boolean | true/false | false | — |
| configSet | 否 | 配置选项，具体看备注说明 | object | — | value,id | 配置项为Object,配置数据key,包含label,value属性，列如：{label:'value',value:'id'} |
# configSet
| 参数 | 必填 | 说明 | 类型 | 可选值 | 默认值 | 备注 |
|---|---|---|---|---|---|---|
| multiple | 否 | 是否多选 | Boolean | true/false | false | — |
| checkStrictly | 否 | 是否严格的遵守父子节点不互相关联 | Boolean | true/false | false | — |
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 当选中节点变化时触发 | 选中节点的值 |