Cascader 多级联动

规则

{
    type:"cascader",
    title:"所在区域",
    field:"address",
    value:['陕西省','西安市','新城区'],
    props:{
        options:[{
            value: 'beijing',
            label: '北京',
            children: [
                {
                    value: 'gugong',
                    label: '故宫'
                },
                {
                    value: 'tiantan',
                    label: '天坛'
                },
                {
                    value: 'wangfujing',
                    label: '王府井'
                }
            ]
        }, {
            value: 'jiangsu',
            label: '江苏',
            children: [
                {
                    value: 'nanjing',
                    label: '南京',
                    children: [
                        {
                            value: 'fuzimiao',
                            label: '夫子庙',
                        }
                    ]
                },
                {
                    value: 'suzhou',
                    label: '苏州',
                    children: [
                        {
                            value: 'zhuozhengyuan',
                            label: '拙政园',
                        },
                        {
                            value: 'shizilin',
                            label: '狮子林',
                        }
                    ]
                }
            ]
        }]
    }
}

完整配置项:Element_Cascader

value :Array

Props

属性名	说明	类型	默认值
options	选项的数据源， `value` 和 `label` 可以通过 `CascaderProps` 自定义.	`object`	—
props	配置选项, 请参阅下面 `CascaderProps` 表。	`object`	—
size	尺寸	`enum`	—
placeholder	输入框占位文本	`string`	—
disabled	是否禁用	`boolean`	—
clearable	是否支持清空选项	`boolean`	—
showAllLevels	输入框中是否显示选中值的完整路径	`boolean`	true
collapseTags	多选模式下是否折叠Tag	`boolean`	—
collapseTagsTooltip	当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。要使用此属性，`collapse-tags`属性必须设定为 true	`boolean`	false
maxCollapseTagsTooltipHeight	collapse tags 的最大高度	`string` / `number`	—
separator	用于分隔选项的字符	`string`	' / '
filterable	该选项是否可以被搜索	`boolean`	—
filterMethod	自定义搜索逻辑，第一个参数是`node`，第二个参数是`keyword`，返回的布尔值表示是否保留该选项	`Function`	—
debounce	搜索关键词正在输入时的去抖延迟，单位为毫秒	`number`	300
beforeFilter	过滤函数调用前，所要调用的钩子函数，该函数接收要过滤的值作为参数。如果该函数的返回值是 `false` 或者是一个被拒绝的 `Promise`，那么接下来的过滤逻辑便不会执行。	`Function`	—
popperClass	弹出内容的自定义类名	`string`	''
teleported	弹层是否使用 teleport	`boolean`	true
tagType	标签类型	`enum`	info
tagEffect	tag effect	`enum`	light
validateEvent	输入时是否触发表单的校验	`boolean`	true
maxCollapseTags	需要显示的 Tag 的最大数量只有当 `collapse-tags` 设置为 true 时才会生效。	`number`	1
emptyValues	组件的空值配置参考config-provider	`array`	—
valueOnClear	清空选项的值参考 config-provider	`string` / `number` / `boolean` / `Function`	—
persistent	当下拉框未被激活并且`persistent`设置为`false`，下拉框容器会被删除。	`boolean`	true
fallbackPlacements	Tooltip 可用的 positions 请查看popper.js 文档	`arrary`	—
placement	下拉框出现的位置	`enum`	bottom-start

Events

事件名	说明	类型
change	当绑定值变化时触发的事件	`Function`
expand-change	当展开节点发生变化时触发	`Function`
blur	当失去焦点时触发	`Function`
focus	当获得焦点时触发	`Function`
clear	可清空的单选模式下用户点击清空按钮时触发	`Function`
visible-change	下拉框出现/隐藏时触发	`Function`
remove-tag	在多选模式下，移除Tag时触发	`Function`

Slots

插槽名	说明	作用域
default	自定义备选项的节点内容，分别为当前节点的 Node 对象和数据	`object`
empty	无匹配选项时的内容	—
prefix	输入框头部内容	—
suggestion-item	搜索时自定义建议项内容	`object`

CascaderProps

属性	说明	类型	默认值
expandTrigger	次级菜单的展开方式	`enum`	click
multiple	是否多选	`boolean`	false
checkStrictly	是否严格的遵守父子节点不互相关联	`boolean`	false
emitPath	在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值	`boolean`	true
lazy	是否动态加载子节点，需与 lazyLoad 方法结合使用	`boolean`	false
lazyLoad	加载动态数据的方法，仅在 lazy 为 true 时有效	`Function`	—
value	指定选项的值为选项对象的某个属性值	`string`	value
label	指定选项标签为选项对象的某个属性值	`string`	label
children	指定选项的子选项为选项对象的某个属性值	`string`	children
disabled	指定选项的禁用为选项对象的某个属性值	`string`	disabled
leaf	指定选项的叶子节点的标志位为选项对象的某个属性值	`string`	leaf
hoverThreshold	hover 时展开菜单的灵敏度阈值	`number`	500

Cascader 多级联动 ​

规则 ​

Props ​

Events ​

Slots ​

CascaderProps ​

Cascader 多级联动

规则

Props

Events

Slots

CascaderProps