请教，js遍历树形数据，展示对应的数据

Question

需求：
根据后台返回的数据展示不同的平台和期限，用户选择不同的授权平台，展示对应平台下的授权期限，然后显示最后的价格
html：

<p class="price">￥0.01</p>
<div class="au_plat">
  <p class="type">授权平台：</p>
  <div class="select">
    <!-- 多个平台 -->
  </div>
  </div>
  <div class="au_per">
  <p class="type">授权期限：</p>
  <div class="select">
    <!-- 多个期限 -->
  </div>
</div>

后台返回的数据：

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元"
            }
        ]
    }
],

想实现的效果：

请教下有没有好的实现方法，求代码，感谢！！

Answer 1

用vue 实现最简单。

https://codepen.io/1567887123...

原生js 搞了一个

https://codepen.io/1567887123...