"use strict";(self["webpackChunklin_cms_vue"]=self["webpackChunklin_cms_vue"]||[]).push([[2698],{2698:function(e,l,n){n.r(l),n.d(l,{default:function(){return R}});var a=n(20641),u=n(90033),o=function(e){return(0,a.Qi)("data-v-518303d7"),e=e(),(0,a.jt)(),e},t={class:"lin-container"},i=o((function(){return(0,a.Lk)("div",{class:"lin-title"},"Cascader 级联选择器",-1)})),b={class:"lin-wrap-ui"},r=o((function(){return(0,a.Lk)("div",{slot:"header"},[(0,a.Lk)("span",null,"基础用法")],-1)})),v={class:"block"},c=o((function(){return(0,a.Lk)("span",{class:"demonstration"},"默认 click 触发子菜单",-1)})),s={class:"block"},d=o((function(){return(0,a.Lk)("span",{class:"demonstration"},"hover 触发子菜单",-1)})),p={style:{"white-space":"pre-wrap"}},h=o((function(){return(0,a.Lk)("div",{slot:"header"},[(0,a.Lk)("span",null,"禁用选项")],-1)})),g=o((function(){return(0,a.Lk)("span",{class:"demonstration"},"通过在数据源中设置 disabled 字段来声明该选项是禁用的",-1)})),m={style:{"white-space":"pre-wrap"}},k=o((function(){return(0,a.Lk)("div",{slot:"header"},[(0,a.Lk)("span",null,"仅显示最后一级")],-1)})),f=o((function(){return(0,a.Lk)("span",{class:"demonstration"},"可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。",-1)})),y={style:{"white-space":"pre-wrap"}},x=o((function(){return(0,a.Lk)("div",{slot:"header"},[(0,a.Lk)("span",null,"默认值")],-1)})),C={style:{"white-space":"pre-wrap"}},T=o((function(){return(0,a.Lk)("div",{slot:"header"},[(0,a.Lk)("span",null,"选择即改变")],-1)})),L=o((function(){return(0,a.Lk)("span",{class:"demonstration"},"点击或移入选项即表示选中该项，可用于选择任意一级菜单的选项。",-1)})),w={style:{"white-space":"pre-wrap"}},F=o((function(){return(0,a.Lk)("div",{slot:"header"},[(0,a.Lk)("span",null,"动态加载次级选项")],-1)})),P=o((function(){return(0,a.Lk)("span",{class:"demonstration"},"当选中某一级时，动态加载该级下的选项。",-1)})),D={style:{"white-space":"pre-wrap"}},z=o((function(){return(0,a.Lk)("div",{slot:"header"},[(0,a.Lk)("span",null,"可搜索")],-1)})),S={class:"block"},B=o((function(){return(0,a.Lk)("span",{class:"demonstration"},"只可选择最后一级菜单的选项",-1)})),N={class:"block"},_=o((function(){return(0,a.Lk)("span",{class:"demonstration"},"可选择任意一级菜单的选项",-1)})),I={style:{"white-space":"pre-wrap"}};function j(e,l,n,o,j,O){var M=(0,a.g2)("el-cascader"),A=(0,a.g2)("el-col"),R=(0,a.g2)("el-row"),U=(0,a.g2)("el-collapse-item"),V=(0,a.g2)("el-collapse"),W=(0,a.g2)("el-card");return(0,a.uX)(),(0,a.CE)("div",t,[i,(0,a.Lk)("div",b,[(0,a.bF)(W,{class:"box-card",style:{"margin-bottom":"50px"}},{default:(0,a.k6)((function(){return[r,(0,a.bF)(R,null,{default:(0,a.k6)((function(){return[(0,a.bF)(A,null,{default:(0,a.k6)((function(){return[(0,a.Lk)("div",v,[c,(0,a.bF)(M,{options:j.options,modelValue:j.selectedOptions,"onUpdate:modelValue":l[0]||(l[0]=function(e){return j.selectedOptions=e}),onChange:O.handleChange},null,8,["options","modelValue","onChange"])]),(0,a.Lk)("div",s,[d,(0,a.bF)(M,{"expand-trigger":"hover",options:j.options,modelValue:j.selectedOptions2,"onUpdate:modelValue":l[1]||(l[1]=function(e){return j.selectedOptions2=e}),onChange:O.handleChange},null,8,["options","modelValue","onChange"])])]})),_:1})]})),_:1}),(0,a.bF)(V,null,{default:(0,a.k6)((function(){return[(0,a.bF)(U,{title:"查看代码",name:"2"},{default:(0,a.k6)((function(){return[(0,a.Lk)("div",p,(0,u.v_)(j.base),1)]})),_:1})]})),_:1})]})),_:1}),(0,a.bF)(W,{style:{"margin-bottom":"50px"}},{default:(0,a.k6)((function(){return[h,(0,a.bF)(R,null,{default:(0,a.k6)((function(){return[(0,a.Lk)("div",null,[g,(0,a.bF)(M,{options:j.optionsWithDisabled},null,8,["options"])])]})),_:1}),(0,a.bF)(V,null,{default:(0,a.k6)((function(){return[(0,a.bF)(U,{title:"查看代码",name:"2"},{default:(0,a.k6)((function(){return[(0,a.Lk)("div",m,(0,u.v_)(j.base),1)]})),_:1})]})),_:1})]})),_:1}),(0,a.bF)(W,{style:{"margin-bottom":"50px"}},{default:(0,a.k6)((function(){return[k,(0,a.bF)(R,null,{default:(0,a.k6)((function(){return[(0,a.Lk)("div",null,[f,(0,a.bF)(M,{options:j.options,"show-all-levels":!1},null,8,["options"])])]})),_:1}),(0,a.bF)(V,null,{default:(0,a.k6)((function(){return[(0,a.bF)(U,{title:"查看代码",name:"2"},{default:(0,a.k6)((function(){return[(0,a.Lk)("div",y,(0,u.v_)(j.showAllLevels),1)]})),_:1})]})),_:1})]})),_:1}),(0,a.bF)(W,{style:{"margin-bottom":"50px"}},{default:(0,a.k6)((function(){return[x,(0,a.bF)(R,null,{default:(0,a.k6)((function(){return[(0,a.Lk)("div",null,[(0,a.bF)(M,{options:j.options1,modelValue:j.selectedOptions3,"onUpdate:modelValue":l[2]||(l[2]=function(e){return j.selectedOptions3=e})},null,8,["options","modelValue"])])]})),_:1}),(0,a.bF)(V,null,{default:(0,a.k6)((function(){return[(0,a.bF)(U,{title:"查看代码",name:"2"},{default:(0,a.k6)((function(){return[(0,a.Lk)("div",C,(0,u.v_)(j.defaultValue),1)]})),_:1})]})),_:1})]})),_:1}),(0,a.bF)(W,{style:{"margin-bottom":"50px"}},{default:(0,a.k6)((function(){return[T,(0,a.bF)(R,null,{default:(0,a.k6)((function(){return[(0,a.Lk)("div",null,[L,(0,a.bF)(M,{options:j.options,"change-on-select":""},null,8,["options"])])]})),_:1}),(0,a.bF)(V,null,{default:(0,a.k6)((function(){return[(0,a.bF)(U,{title:"查看代码",name:"2"},{default:(0,a.k6)((function(){return[(0,a.Lk)("div",w,(0,u.v_)(j.changeOnSelect),1)]})),_:1})]})),_:1})]})),_:1}),(0,a.bF)(W,{style:{"margin-bottom":"50px"}},{default:(0,a.k6)((function(){return[F,(0,a.bF)(R,null,{default:(0,a.k6)((function(){return[(0,a.Lk)("div",null,[P,(0,a.bF)(M,{options:j.options2,onActiveItemChange:O.handleItemChange,props:j.props},null,8,["options","onActiveItemChange","props"])])]})),_:1}),(0,a.bF)(V,null,{default:(0,a.k6)((function(){return[(0,a.bF)(U,{title:"查看代码",name:"2"},{default:(0,a.k6)((function(){return[(0,a.Lk)("div",D,(0,u.v_)(j.activeItemChange),1)]})),_:1})]})),_:1})]})),_:1}),(0,a.bF)(W,{style:{"margin-bottom":"50px"}},{default:(0,a.k6)((function(){return[z,(0,a.bF)(R,null,{default:(0,a.k6)((function(){return[(0,a.Lk)("div",S,[B,(0,a.bF)(M,{placeholder:"试试搜索：指南",options:j.options,filterable:""},null,8,["options"])]),(0,a.Lk)("div",N,[_,(0,a.bF)(M,{placeholder:"试试搜索：指南",options:j.options,filterable:"","change-on-select":""},null,8,["options"])])]})),_:1}),(0,a.bF)(V,null,{default:(0,a.k6)((function(){return[(0,a.bF)(U,{title:"查看代码",name:"2"},{default:(0,a.k6)((function(){return[(0,a.Lk)("div",I,(0,u.v_)(j.filterable),1)]})),_:1})]})),_:1})]})),_:1})])])}var O={data:function(){return{filterable:"\n<div class=\"block\">\n <span class=\"demonstration\">只可选择最后一级菜单的选项</span>\n <el-cascader\n placeholder=\"试试搜索：指南\"\n :options=\"options\"\n filterable\n ></el-cascader>\n</div>\n<div class=\"block\">\n <span class=\"demonstration\">可选择任意一级菜单的选项</span>\n <el-cascader\n placeholder=\"试试搜索：指南\"\n :options=\"options\"\n filterable\n change-on-select\n ></el-cascader>\n</div>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'zhinan',\n label: '指南',\n children: [{\n value: 'shejiyuanze',\n label: '设计原则',\n children: [{\n value: 'yizhi',\n label: '一致'\n }, {\n value: 'fankui',\n label: '反馈'\n }, {\n value: 'xiaolv',\n label: '效率'\n }, {\n value: 'kekong',\n label: '可控'\n }]\n }, {\n value: 'daohang',\n label: '导航',\n children: [{\n value: 'cexiangdaohang',\n label: '侧向导航'\n }, {\n value: 'dingbudaohang',\n label: '顶部导航'\n }]\n }]\n }, {\n value: 'zujian',\n label: '组件',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout 布局'\n }, {\n value: 'color',\n label: 'Color 色彩'\n }, {\n value: 'typography',\n label: 'Typography 字体'\n }, {\n value: 'icon',\n label: 'Icon 图标'\n }, {\n value: 'button',\n label: 'Button 按钮'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio 单选框'\n }, {\n value: 'checkbox',\n label: 'Checkbox 多选框'\n }, {\n value: 'input',\n label: 'Input 输入框'\n }, {\n value: 'input-number',\n label: 'InputNumber 计数器'\n }, {\n value: 'select',\n label: 'Select 选择器'\n }, {\n value: 'cascader',\n label: 'Cascader 级联选择器'\n }, {\n value: 'switch',\n label: 'Switch 开关'\n }, {\n value: 'slider',\n label: 'Slider 滑块'\n }, {\n value: 'time-picker',\n label: 'TimePicker 时间选择器'\n }, {\n value: 'date-picker',\n label: 'DatePicker 日期选择器'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker 日期时间选择器'\n }, {\n value: 'upload',\n label: 'Upload 上传'\n }, {\n value: 'rate',\n label: 'Rate 评分'\n }, {\n value: 'form',\n label: 'Form 表单'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table 表格'\n }, {\n value: 'tag',\n label: 'Tag 标签'\n }, {\n value: 'progress',\n label: 'Progress 进度条'\n }, {\n value: 'tree',\n label: 'Tree 树形控件'\n }, {\n value: 'pagination',\n label: 'Pagination 分页'\n }, {\n value: 'badge',\n label: 'Badge 标记'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert 警告'\n }, {\n value: 'loading',\n label: 'Loading 加载'\n }, {\n value: 'message',\n label: 'Message 消息提示'\n }, {\n value: 'message-box',\n label: 'MessageBox 弹框'\n }, {\n value: 'notification',\n label: 'Notification 通知'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu 导航菜单'\n }, {\n value: 'tabs',\n label: 'Tabs 标签页'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb 面包屑'\n }, {\n value: 'dropdown',\n label: 'Dropdown 下拉菜单'\n }, {\n value: 'steps',\n label: 'Steps 步骤条'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog 对话框'\n }, {\n value: 'tooltip',\n label: 'Tooltip 文字提示'\n }, {\n value: 'popover',\n label: 'Popover 弹出框'\n }, {\n value: 'card',\n label: 'Card 卡片'\n }, {\n value: 'carousel',\n label: 'Carousel 走马灯'\n }, {\n value: 'collapse',\n label: 'Collapse 折叠面板'\n }]\n }]\n }, {\n value: 'ziyuan',\n label: '资源',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'jiaohu',\n label: '组件交互文档'\n }]\n }]\n };\n }\n };\n<\/script>",activeItemChange:"\n<el-cascader\n :options=\"options\"\n @active-item-change=\"handleItemChange\"\n :props=\"props\"\n></el-cascader>\n\n<script>\n export default {\n data() {\n return {\n options2: [{\n label: '江苏',\n cities: []\n }, {\n label: '浙江',\n cities: []\n }],\n props: {\n value: 'label',\n children: 'cities'\n }\n };\n },\n\n methods: {\n handleItemChange(val) {\n console.log('active item:', val);\n setTimeout(_ => {\n if (val.indexOf('江苏') > -1 && !this.options2[0].cities.length) {\n this.options2[0].cities = [{\n label: '南京'\n }];\n } else if (val.indexOf('浙江') > -1 && !this.options2[1].cities.length) {\n this.options2[1].cities = [{\n label: '杭州'\n }];\n }\n }, 300);\n }\n }\n };\n<\/script>",changeOnSelect:"\n<el-cascader\n :options=\"options\"\n change-on-select\n></el-cascader>\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'zhinan',\n label: '指南',\n children: [{\n value: 'shejiyuanze',\n label: '设计原则',\n children: [{\n value: 'yizhi',\n label: '一致'\n }, {\n value: 'fankui',\n label: '反馈'\n }, {\n value: 'xiaolv',\n label: '效率'\n }, {\n value: 'kekong',\n label: '可控'\n }]\n }, {\n value: 'daohang',\n label: '导航',\n children: [{\n value: 'cexiangdaohang',\n label: '侧向导航'\n }, {\n value: 'dingbudaohang',\n label: '顶部导航'\n }]\n }]\n }, {\n value: 'zujian',\n label: '组件',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout 布局'\n }, {\n value: 'color',\n label: 'Color 色彩'\n }, {\n value: 'typography',\n label: 'Typography 字体'\n }, {\n value: 'icon',\n label: 'Icon 图标'\n }, {\n value: 'button',\n label: 'Button 按钮'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio 单选框'\n }, {\n value: 'checkbox',\n label: 'Checkbox 多选框'\n }, {\n value: 'input',\n label: 'Input 输入框'\n }, {\n value: 'input-number',\n label: 'InputNumber 计数器'\n }, {\n value: 'select',\n label: 'Select 选择器'\n }, {\n value: 'cascader',\n label: 'Cascader 级联选择器'\n }, {\n value: 'switch',\n label: 'Switch 开关'\n }, {\n value: 'slider',\n label: 'Slider 滑块'\n }, {\n value: 'time-picker',\n label: 'TimePicker 时间选择器'\n }, {\n value: 'date-picker',\n label: 'DatePicker 日期选择器'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker 日期时间选择器'\n }, {\n value: 'upload',\n label: 'Upload 上传'\n }, {\n value: 'rate',\n label: 'Rate 评分'\n }, {\n value: 'form',\n label: 'Form 表单'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table 表格'\n }, {\n value: 'tag',\n label: 'Tag 标签'\n }, {\n value: 'progress',\n label: 'Progress 进度条'\n }, {\n value: 'tree',\n label: 'Tree 树形控件'\n }, {\n value: 'pagination',\n label: 'Pagination 分页'\n }, {\n value: 'badge',\n label: 'Badge 标记'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert 警告'\n }, {\n value: 'loading',\n label: 'Loading 加载'\n }, {\n value: 'message',\n label: 'Message 消息提示'\n }, {\n value: 'message-box',\n label: 'MessageBox 弹框'\n }, {\n value: 'notification',\n label: 'Notification 通知'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu 导航菜单'\n }, {\n value: 'tabs',\n label: 'Tabs 标签页'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb 面包屑'\n }, {\n value: 'dropdown',\n label: 'Dropdown 下拉菜单'\n }, {\n value: 'steps',\n label: 'Steps 步骤条'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog 对话框'\n }, {\n value: 'tooltip',\n label: 'Tooltip 文字提示'\n }, {\n value: 'popover',\n label: 'Popover 弹出框'\n }, {\n value: 'card',\n label: 'Card 卡片'\n }, {\n value: 'carousel',\n label: 'Carousel 走马灯'\n }, {\n value: 'collapse',\n label: 'Collapse 折叠面板'\n }]\n }]\n }, {\n value: 'ziyuan',\n label: '资源',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'jiaohu',\n label: '组件交互文档'\n }]\n }]\n };\n }\n };\n<\/script>",defaultValue:"\n<el-cascader\n :options=\"options\"\n v-model=\"selectedOptions\"\n></el-cascader>\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'zhinan',\n label: '指南',\n children: [{\n value: 'shejiyuanze',\n label: '设计原则',\n children: [{\n value: 'yizhi',\n label: '一致'\n }, {\n value: 'fankui',\n label: '反馈'\n }, {\n value: 'xiaolv',\n label: '效率'\n }, {\n value: 'kekong',\n label: '可控'\n }]\n }, {\n value: 'daohang',\n label: '导航',\n children: [{\n value: 'cexiangdaohang',\n label: '侧向导航'\n }, {\n value: 'dingbudaohang',\n label: '顶部导航'\n }]\n }]\n }, {\n value: 'zujian',\n label: '组件',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout 布局'\n }, {\n value: 'color',\n label: 'Color 色彩'\n }, {\n value: 'typography',\n label: 'Typography 字体'\n }, {\n value: 'icon',\n label: 'Icon 图标'\n }, {\n value: 'button',\n label: 'Button 按钮'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio 单选框'\n }, {\n value: 'checkbox',\n label: 'Checkbox 多选框'\n }, {\n value: 'input',\n label: 'Input 输入框'\n }, {\n value: 'input-number',\n label: 'InputNumber 计数器'\n }, {\n value: 'select',\n label: 'Select 选择器'\n }, {\n value: 'cascader',\n label: 'Cascader 级联选择器'\n }, {\n value: 'switch',\n label: 'Switch 开关'\n }, {\n value: 'slider',\n label: 'Slider 滑块'\n }, {\n value: 'time-picker',\n label: 'TimePicker 时间选择器'\n }, {\n value: 'date-picker',\n label: 'DatePicker 日期选择器'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker 日期时间选择器'\n }, {\n value: 'upload',\n label: 'Upload 上传'\n }, {\n value: 'rate',\n label: 'Rate 评分'\n }, {\n value: 'form',\n label: 'Form 表单'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table 表格'\n }, {\n value: 'tag',\n label: 'Tag 标签'\n }, {\n value: 'progress',\n label: 'Progress 进度条'\n }, {\n value: 'tree',\n label: 'Tree 树形控件'\n }, {\n value: 'pagination',\n label: 'Pagination 分页'\n }, {\n value: 'badge',\n label: 'Badge 标记'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert 警告'\n }, {\n value: 'loading',\n label: 'Loading 加载'\n }, {\n value: 'message',\n label: 'Message 消息提示'\n }, {\n value: 'message-box',\n label: 'MessageBox 弹框'\n }, {\n value: 'notification',\n label: 'Notification 通知'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu 导航菜单'\n }, {\n value: 'tabs',\n label: 'Tabs 标签页'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb 面包屑'\n }, {\n value: 'dropdown',\n label: 'Dropdown 下拉菜单'\n }, {\n value: 'steps',\n label: 'Steps 步骤条'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog 对话框'\n }, {\n value: 'tooltip',\n label: 'Tooltip 文字提示'\n }, {\n value: 'popover',\n label: 'Popover 弹出框'\n }, {\n value: 'card',\n label: 'Card 卡片'\n }, {\n value: 'carousel',\n label: 'Carousel 走马灯'\n }, {\n value: 'collapse',\n label: 'Collapse 折叠面板'\n }]\n }]\n }, {\n value: 'ziyuan',\n label: '资源',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'jiaohu',\n label: '组件交互文档'\n }]\n }],\n selectedOptions: ['zujian', 'data', 'tag']\n };\n }\n };\n<\/script>",showAllLevels:"\n<el-cascader\n :options=\"options\"\n :show-all-levels=\"false\"\n></el-cascader>\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'zhinan',\n label: '指南',\n children: [{\n value: 'shejiyuanze',\n label: '设计原则',\n children: [{\n value: 'yizhi',\n label: '一致'\n }, {\n value: 'fankui',\n label: '反馈'\n }, {\n value: 'xiaolv',\n label: '效率'\n }, {\n value: 'kekong',\n label: '可控'\n }]\n }, {\n value: 'daohang',\n label: '导航',\n children: [{\n value: 'cexiangdaohang',\n label: '侧向导航'\n }, {\n value: 'dingbudaohang',\n label: '顶部导航'\n }]\n }]\n }, {\n value: 'zujian',\n label: '组件',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout 布局'\n }, {\n value: 'color',\n label: 'Color 色彩'\n }, {\n value: 'typography',\n label: 'Typography 字体'\n }, {\n value: 'icon',\n label: 'Icon 图标'\n }, {\n value: 'button',\n label: 'Button 按钮'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio 单选框'\n }, {\n value: 'checkbox',\n label: 'Checkbox 多选框'\n }, {\n value: 'input',\n label: 'Input 输入框'\n }, {\n value: 'input-number',\n label: 'InputNumber 计数器'\n }, {\n value: 'select',\n label: 'Select 选择器'\n }, {\n value: 'cascader',\n label: 'Cascader 级联选择器'\n }, {\n value: 'switch',\n label: 'Switch 开关'\n }, {\n value: 'slider',\n label: 'Slider 滑块'\n }, {\n value: 'time-picker',\n label: 'TimePicker 时间选择器'\n }, {\n value: 'date-picker',\n label: 'DatePicker 日期选择器'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker 日期时间选择器'\n }, {\n value: 'upload',\n label: 'Upload 上传'\n }, {\n value: 'rate',\n label: 'Rate 评分'\n }, {\n value: 'form',\n label: 'Form 表单'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table 表格'\n }, {\n value: 'tag',\n label: 'Tag 标签'\n }, {\n value: 'progress',\n label: 'Progress 进度条'\n }, {\n value: 'tree',\n label: 'Tree 树形控件'\n }, {\n value: 'pagination',\n label: 'Pagination 分页'\n }, {\n value: 'badge',\n label: 'Badge 标记'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert 警告'\n }, {\n value: 'loading',\n label: 'Loading 加载'\n }, {\n value: 'message',\n label: 'Message 消息提示'\n }, {\n value: 'message-box',\n label: 'MessageBox 弹框'\n }, {\n value: 'notification',\n label: 'Notification 通知'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu 导航菜单'\n }, {\n value: 'tabs',\n label: 'Tabs 标签页'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb 面包屑'\n }, {\n value: 'dropdown',\n label: 'Dropdown 下拉菜单'\n }, {\n value: 'steps',\n label: 'Steps 步骤条'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog 对话框'\n }, {\n value: 'tooltip',\n label: 'Tooltip 文字提示'\n }, {\n value: 'popover',\n label: 'Popover 弹出框'\n }, {\n value: 'card',\n label: 'Card 卡片'\n }, {\n value: 'carousel',\n label: 'Carousel 走马灯'\n }, {\n value: 'collapse',\n label: 'Collapse 折叠面板'\n }]\n }]\n }, {\n value: 'ziyuan',\n label: '资源',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'jiaohu',\n label: '组件交互文档'\n }]\n }]\n };\n }\n };\n<\/script>",base:"\n<div class=\"block\">\n <span class=\"demonstration\">默认 click 触发子菜单</span>\n <el-cascader\n :options=\"options\"\n v-model=\"selectedOptions\"\n @change=\"handleChange\">\n </el-cascader>\n</div>\n<div class=\"block\">\n <span class=\"demonstration\">hover 触发子菜单</span>\n <el-cascader\n expand-trigger=\"hover\"\n :options=\"options\"\n v-model=\"selectedOptions2\"\n @change=\"handleChange\">\n </el-cascader>\n</div>\n\n<script>\n export default {\n data() {\n return {\n options: [{\n value: 'zhinan',\n label: '指南',\n children: [{\n value: 'shejiyuanze',\n label: '设计原则',\n children: [{\n value: 'yizhi',\n label: '一致'\n }, {\n value: 'fankui',\n label: '反馈'\n }, {\n value: 'xiaolv',\n label: '效率'\n }, {\n value: 'kekong',\n label: '可控'\n }]\n }, {\n value: 'daohang',\n label: '导航',\n children: [{\n value: 'cexiangdaohang',\n label: '侧向导航'\n }, {\n value: 'dingbudaohang',\n label: '顶部导航'\n }]\n }]\n }, {\n value: 'zujian',\n label: '组件',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout 布局'\n }, {\n value: 'color',\n label: 'Color 色彩'\n }, {\n value: 'typography',\n label: 'Typography 字体'\n }, {\n value: 'icon',\n label: 'Icon 图标'\n }, {\n value: 'button',\n label: 'Button 按钮'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio 单选框'\n }, {\n value: 'checkbox',\n label: 'Checkbox 多选框'\n }, {\n value: 'input',\n label: 'Input 输入框'\n }, {\n value: 'input-number',\n label: 'InputNumber 计数器'\n }, {\n value: 'select',\n label: 'Select 选择器'\n }, {\n value: 'cascader',\n label: 'Cascader 级联选择器'\n }, {\n value: 'switch',\n label: 'Switch 开关'\n }, {\n value: 'slider',\n label: 'Slider 滑块'\n }, {\n value: 'time-picker',\n label: 'TimePicker 时间选择器'\n }, {\n value: 'date-picker',\n label: 'DatePicker 日期选择器'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker 日期时间选择器'\n }, {\n value: 'upload',\n label: 'Upload 上传'\n }, {\n value: 'rate',\n label: 'Rate 评分'\n }, {\n value: 'form',\n label: 'Form 表单'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table 表格'\n }, {\n value: 'tag',\n label: 'Tag 标签'\n }, {\n value: 'progress',\n label: 'Progress 进度条'\n }, {\n value: 'tree',\n label: 'Tree 树形控件'\n }, {\n value: 'pagination',\n label: 'Pagination 分页'\n }, {\n value: 'badge',\n label: 'Badge 标记'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert 警告'\n }, {\n value: 'loading',\n label: 'Loading 加载'\n }, {\n value: 'message',\n label: 'Message 消息提示'\n }, {\n value: 'message-box',\n label: 'MessageBox 弹框'\n }, {\n value: 'notification',\n label: 'Notification 通知'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu 导航菜单'\n }, {\n value: 'tabs',\n label: 'Tabs 标签页'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb 面包屑'\n }, {\n value: 'dropdown',\n label: 'Dropdown 下拉菜单'\n }, {\n value: 'steps',\n label: 'Steps 步骤条'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog 对话框'\n }, {\n value: 'tooltip',\n label: 'Tooltip 文字提示'\n }, {\n value: 'popover',\n label: 'Popover 弹出框'\n }, {\n value: 'card',\n label: 'Card 卡片'\n }, {\n value: 'carousel',\n label: 'Carousel 走马灯'\n }, {\n value: 'collapse',\n label: 'Collapse 折叠面板'\n }]\n }]\n }, {\n value: 'ziyuan',\n label: '资源',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'jiaohu',\n label: '组件交互文档'\n }]\n }],\n selectedOptions: [],\n selectedOptions2: []\n };\n },\n methods: {\n handleChange(value) {\n console.log(value);\n }\n }\n };\n<\/script>",disable:"\n<el-cascader\n :options=\"optionsWithDisabled\"\n></el-cascader>\n<script>\n export default {\n data() {\n return {\n optionsWithDisabled: [{\n value: 'zhinan',\n label: '指南',\n disabled: true,\n children: [{\n value: 'shejiyuanze',\n label: '设计原则',\n children: [{\n value: 'yizhi',\n label: '一致'\n }, {\n value: 'fankui',\n label: '反馈'\n }, {\n value: 'xiaolv',\n label: '效率'\n }, {\n value: 'kekong',\n label: '可控'\n }]\n }, {\n value: 'daohang',\n label: '导航',\n children: [{\n value: 'cexiangdaohang',\n label: '侧向导航'\n }, {\n value: 'dingbudaohang',\n label: '顶部导航'\n }]\n }]\n }, {\n value: 'zujian',\n label: '组件',\n children: [{\n value: 'basic',\n label: 'Basic',\n children: [{\n value: 'layout',\n label: 'Layout 布局'\n }, {\n value: 'color',\n label: 'Color 色彩'\n }, {\n value: 'typography',\n label: 'Typography 字体'\n }, {\n value: 'icon',\n label: 'Icon 图标'\n }, {\n value: 'button',\n label: 'Button 按钮'\n }]\n }, {\n value: 'form',\n label: 'Form',\n children: [{\n value: 'radio',\n label: 'Radio 单选框'\n }, {\n value: 'checkbox',\n label: 'Checkbox 多选框'\n }, {\n value: 'input',\n label: 'Input 输入框'\n }, {\n value: 'input-number',\n label: 'InputNumber 计数器'\n }, {\n value: 'select',\n label: 'Select 选择器'\n }, {\n value: 'cascader',\n label: 'Cascader 级联选择器'\n }, {\n value: 'switch',\n label: 'Switch 开关'\n }, {\n value: 'slider',\n label: 'Slider 滑块'\n }, {\n value: 'time-picker',\n label: 'TimePicker 时间选择器'\n }, {\n value: 'date-picker',\n label: 'DatePicker 日期选择器'\n }, {\n value: 'datetime-picker',\n label: 'DateTimePicker 日期时间选择器'\n }, {\n value: 'upload',\n label: 'Upload 上传'\n }, {\n value: 'rate',\n label: 'Rate 评分'\n }, {\n value: 'form',\n label: 'Form 表单'\n }]\n }, {\n value: 'data',\n label: 'Data',\n children: [{\n value: 'table',\n label: 'Table 表格'\n }, {\n value: 'tag',\n label: 'Tag 标签'\n }, {\n value: 'progress',\n label: 'Progress 进度条'\n }, {\n value: 'tree',\n label: 'Tree 树形控件'\n }, {\n value: 'pagination',\n label: 'Pagination 分页'\n }, {\n value: 'badge',\n label: 'Badge 标记'\n }]\n }, {\n value: 'notice',\n label: 'Notice',\n children: [{\n value: 'alert',\n label: 'Alert 警告'\n }, {\n value: 'loading',\n label: 'Loading 加载'\n }, {\n value: 'message',\n label: 'Message 消息提示'\n }, {\n value: 'message-box',\n label: 'MessageBox 弹框'\n }, {\n value: 'notification',\n label: 'Notification 通知'\n }]\n }, {\n value: 'navigation',\n label: 'Navigation',\n children: [{\n value: 'menu',\n label: 'NavMenu 导航菜单'\n }, {\n value: 'tabs',\n label: 'Tabs 标签页'\n }, {\n value: 'breadcrumb',\n label: 'Breadcrumb 面包屑'\n }, {\n value: 'dropdown',\n label: 'Dropdown 下拉菜单'\n }, {\n value: 'steps',\n label: 'Steps 步骤条'\n }]\n }, {\n value: 'others',\n label: 'Others',\n children: [{\n value: 'dialog',\n label: 'Dialog 对话框'\n }, {\n value: 'tooltip',\n label: 'Tooltip 文字提示'\n }, {\n value: 'popover',\n label: 'Popover 弹出框'\n }, {\n value: 'card',\n label: 'Card 卡片'\n }, {\n value: 'carousel',\n label: 'Carousel 走马灯'\n }, {\n value: 'collapse',\n label: 'Collapse 折叠面板'\n }]\n }]\n }, {\n value: 'ziyuan',\n label: '资源',\n children: [{\n value: 'axure',\n label: 'Axure Components'\n }, {\n value: 'sketch',\n label: 'Sketch Templates'\n }, {\n value: 'jiaohu',\n label: '组件交互文档'\n }]\n }]\n };\n }\n };\n<\/script>",options1:[{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:"组件交互文档"}]}],options2:[{label:"江苏",cities:[]},{label:"浙江",cities:[]}],props:{value:"label",children:"cities"},optionsWithDisabled:[{value:"zhinan",label:"指南",disabled:!0,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:"组件交互文档"}]}],options:[{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:"组件交互文档"}]}],selectedOptions:[],selectedOptions2:[],selectedOptions3:["zujian","data","tag"]}},methods:{handleItemChange:function(e){var l=this;console.log("active item:",e),setTimeout((function(n){e.indexOf("江苏")>-1&&!l.options2[0].cities.length?l.options2[0].cities=[{label:"南京"}]:e.indexOf("浙江")>-1&&!l.options2[1].cities.length&&(l.options2[1].cities=[{label:"杭州"}])}),300)},handleChange:function(e){console.log(e)}}},M=n(66262);const A=(0,M.A)(O,[["render",j],["__scopeId","data-v-518303d7"]]);var R=A}}]);
|
