elementui cascader
ElementUI Cascader 组件使用指南
ElementUI 的 Cascader 组件是一个级联选择器，常用于选择具有层级结构的数据（如省市区、分类目录等）。以下为关键功能和使用方法：
基础用法
引入 Cascader 组件并绑定数据源即可使用：
<el-cascader :options="options" v-model="selectedOptions"></el-cascader>数据格式要求：
options: [{
value: 'zhejiang',
label: '浙江省',
children: [{
value: 'hangzhou',
label: '杭州市',
children: [{
value: 'xihu',
label: '西湖区'
}]
}]
}]动态加载子节点
通过 lazy 属性和 lazyLoad 方法实现异步加载：
<el-cascader :props="props" lazy></el-cascader>props: {
lazy: true,
lazyLoad(node, resolve) {
const { level } = node;
// 异步加载数据
setTimeout(() => {
const nodes = Array.from({ length: level + 1 })
.map(item => ({ /* 节点数据 */ }));
resolve(nodes);
}, 500);
}
}可搜索功能
添加 filterable 属性启用搜索：
<el-cascader :options="options" filterable></el-cascader>自定义显示内容
通过 scoped slot 定制节点显示：
<el-cascader :options="options">
<template #default="{ node, data }">
<span>{{ data.label }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>多选模式
设置 props.multiple 开启多选：
<el-cascader :options="options" :props="{ multiple: true }"></el-cascader>常用属性
clearable：是否显示清空按钮show-all-levels：是否显示完整路径collapse-tags：多选时折叠标签separator：选项分隔符（默认/）
注意事项
- 数据源的
value字段需保持唯一性 - 动态加载时需确保
lazyLoad方法正确处理异步逻辑 - 多选模式下数据量较大时建议启用虚拟滚动（需 ElementUI 2.15.0+）
完整文档参考 ElementUI Cascader。
