vue3 cascader 自定义 label，value 父节点，子节点显示

<template>
    <div>
        <div class="container">
            <h1>开发中...</h1>
        </div>
        <el-cascader
            v-model="selectedOptions"
            :props="{ value: 'id', label: 'name', emitPath: true }"
            :options="options"
            @change="citychange"
            filterable
            clearable
            ref="cascaderRef" />
        {{ selectedOptions }}
        <div>
            <h3>已选中的节点及其父节点：</h3>
            <ul>
                <li v-for="node in checkedNodes" :key="node.value">
                    <p><strong>节点值:</strong> {{ node.value }}</p>
                    <p><strong>节点名:</strong> {{ node.label }}</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElCascader } from "element-plus";
import { getAlladdress } from "@/api";

const selectedOptions = ref<string[]>([]);
const options = ref();

const cascaderRef = ref<InstanceType<typeof ElCascader> | null>(null);
const checkedNodes = ref<any[]>([]);

const getaddress = async () => {
    const res = await getAlladdress();
    options.value = res.data.data;
};
getaddress();

const citychange = () => {
    if (cascaderRef.value) {
        checkedNodes.value = cascaderRef.value.getCheckedNodes(false);
        if (checkedNodes.value.length > 0) {
            console.log(checkedNodes.value[0].pathLabels);
            console.log(checkedNodes.value[0].pathValues);
        } else {
            console.log("clear..");
        }
    }
};
</script>