el-cascader设置节点层级

在 el-cascader 中设置节点层级可以使用 props 属性中的 currentOptions 属性，该属性可以用来控制每一层级的数据源。例如，如果您要在第一个层级显示国家列表，在第二个层级显示省份列表，在第三个层级显示城市列表，那么您可以这样设置：

<el-cascader
:options="options"
:props="props"
v-model="selectedValue"
/>

<script>
export default {
data() {
return {
// 基础数据
options: [
{
value: 'china',
label: '中国',
children: [
{
value: 'beijing',
label: '北京',
children: [
{
value: 'dongcheng',
label: '东城区',
},
{
value: 'xicheng',
label: '西城区',
},
// ...
],
},
{
value: 'shanghai',
label: '上海',
children: [
{
value: 'huangpu',
label: '黄浦区',
},
{
value: 'xuhui',
label: '徐汇区',
},
// ...
],
},
// ...
],
},
],
// 自定义属性
props: {
value: 'value',
label: 'label',
children: 'children',
// 控制每个层级的数据源，从而实现节点层级的设置
currentOptions: (node) => {
if (node.level === 0) {
return this.options;
} else if (node.level === 1) {
return node.data.children;
} else {
return node.data.children;
}
},
},
// 已选中的节点列表
selectedValue: [],
};
},
};
</script>