"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
\n 只可选择最后一级菜单的选项\n \n
\n
\n 可选择任意一级菜单的选项\n \n
\n\n