如何根据选择的授权平台和期限动态计算并显示价格？

遍历树形数据，动态展示授权平台和期限

需求

• 根据后端返回的树形数据，展示授权平台和授权期限
• 用户选择不同的授权平台时，展示对应平台下的授权期限
• 最终显示所选授权平台和期限对应的价格

后台返回的数据

price_list: [
    {
        title: "哔哩哔哩",
        children: [
            {
                id: 1,
                platform: 1,
                platform_title: "哔哩哔哩",
                years: 0,
                price: 0.01,
                address: 1,
                address_title: "一年",
                show_title: "¥0.4元"
            },
            {
                id: 19,
                platform: 1,
                platform_title: "哔哩哔哩",
                years: 1,
                price: 0.01,
                address: 0,
                address_title: "不限",
                show_title: "¥1元"
            }
        ]
    },
    {
        title: "微博",
        children: [
            {
                id: 17,
                platform: 3,
                platform_title: "微博",
                years: 0,
                price: 0.01,
                address: 0,
                address_title: "一年",
                show_title: "¥0.2元"
            },
            {
                id: 13,
                platform: 3,
                platform_title: "微博",
                years: 0,
                price: 0.01,
                address: 0,
                address_title: "五年",
                show_title: "¥1元"
            }
        ]
    },
    {
    title: "快手",
        children: [
            {
                id: 16,
                platform: 2,
                platform_title: "快手",
                years: 0,
                price: 0.01,
                address: 0,
                address_title: "不限",
                show_title: "¥0.5元"
            }
        ]
    }
]

vue 实现

InstantMind

AI思维导图生成器，支持30+文件格式一键转换，包括PDF、Word、视频等。

下载

原生 JavaScript 实现

const priceList = [
    {
        title: "哔哩哔哩",
        children: [
            {
                id: 1,
                platform: 1,
                platform_title: "哔哩哔哩",
                years: 0,
                price: 0.01,
                address: 1,
                address_title: "一年",
                show_title: "¥0.4元"
            },
            {
                id: 19,
                platform: 1,
                platform_title: "哔哩哔哩",
                years: 1,
                price: 0.01,
                address: 0,
                address_title: "不限",
                show_title: "¥1元"
            }
        ]
    },
    {
        title: "微博",
        children: [
            {
                id: 17,
                platform: 3,
                platform_title: "微博",
                years: 0,
                price: 0.01,
                address: 0,
                address_title: "一年",
                show_title: "¥0.2元"
            },
            {