ant-design-vue+vue3+fastapi绑定后端数据到级联选择框

界面设计

效果如下：

<template>
    <div>
        <a-cascader v-model:value="value" :options="options" expand-trigger="hover" placeholder="please select">
        </a-cascader>
    </div>
</template>

<script>
import {defineComponent, ref} from 'vue';
import axios from 'axios';

export default defineComponent({
    setup() {
        const value = ref([]);
        const options = ref([]);
        axios.get('http://127.0.0.1:8000/data1')
            .then(function (response) {
                // console.log(response.data);
                options.value = response.data;
            })
            .catch(function (error) {
                console.log(error);
            })
        return {
            value,
            options,
        }
    }
})


</script>
<style scoped>
</style>

:value绑定选择后的数据内容，:options绑定数据源，expand-trigger="hover" 表示鼠标放到上面自动展开。
使用axios访问数据
其中的版本

"axios": "^1.4.0",
"ant-design-vue": "^3.2.20",
"vue": "^3.2.8",

from fastapi import FastAPI
from starlette.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "http://localhost:3000",
]

# 启用 CORS 中间件，配置了允许的来源、允许的请求方法为GET和请求头等。通过添加这个中间件，应用可以处理跨域请求，使得不同源的客户端（例如浏览器）可以安全地访问和使用 API。
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["GET"],
    allow_headers=["*"],
)


@app.get("/data1")
def getData1():
    return [{
        "value": 'zhejiang',
        "label": 'Zhejiang',
        "children": [{
            "value": 'hangzhou',
            "label": 'Hangzhou',
            "children": [{
                "value": 'xihu',
                "label": 'West Lake',
            }],
        }],
    }, {
        "value": 'jiangsu',
        "label": 'Jiangsu',
        "children": [{
            "value": 'nanjing',
            "label": 'Nanjing',
            "children": [{
                "value": 'zhonghuamen',
                "label": 'Zhong Hua Men',
            }],
        }],
    }]