Javascript 如何在“选择标记选项”中正确显示数组子项

我使用treeview自定义数据数组以选择选项：

[
  {
    "id": 1,
    "name": "Parent 1",
    "children": [
      {
        "id": 2,
        "name": "Parent 1 - Children 1"
      },
      {
        "id": 3,
        "name": "Parent 1 - Children 2"
      }
    ]
  },
  {
    "id": 4,
    "name": "Parent 2",
    "children": []
  },
  {
    "id": 5,
    "name": "Parent 3",
    "children": [
      {
        "id": 6,
        "name": "Parent 3 - Children 1",
        "children": [
          {
            "id": 7,
            "name": "Parent 3 -> Children 1 -> Children 1"
          },
          {
            "id": 8,
            "name": "Parent 3 -> Children 1 -> Children 2"
          },
        ]
      }
    ]
  }
]

如何在

标记选项中显示我的treeview数组，如下所示：

<select>
  <option value="1">Parent 1</option>
  <option value="2">--Children 1</option>
  <option value="3">--Children 2</option>
  <option value="4">Parent 2</option>
  <option value="5">Parent 3</option>
  <option value="6">--Children 1</option>
  <option value="7">----Children 1</option>
  <option value="8">----Children 2</option>
</select>

父1
--儿童1
--儿童2
家长2
家长3
--儿童1
----儿童1
----儿童2

从逻辑上讲，我无法解决这个问题。我通常在Vue.js中以这种方式显示选项：

<select class="form-control">
  <option v-for="option in selectOptions">{{option}}</option>
</select>

{{option}}

像这样的东西

newvue({
el:“#应用程序”，
数据（）{
返回{
选项：getData（），
所选：空
}
},
计算：{
选择选项（）{
const tree=this.options
常数单位=[]
添加（此选项为“”）
返回平面
函数添加（节点、前缀）{
nodes.forEach（node=>{
平推({
…节点，
名称：前缀+节点。名称
})
添加（node.children | |[]，前缀+'-'））
})
}
}
}
})
函数getData（）{
返回[{
“id”：1，
“名称”：“父项1”，
“儿童”：[{
“id”：2，
“名称”：“父1-子1”
},
{
“id”：3，
“名称”：“父1-子2”
}
]
},
{
“id”：4，
“名称”：“父级2”，
“儿童”：[]
},
{
“id”：5，
“名称”：“父级3”，
“儿童”：[{
“id”：6，
“名称”：“父3-子1”，
“儿童”：[{
“id”：7，
“名称”：“父3->子1->子1”
},
{
“id”：8，
“名称”：“父3->子1->子2”
},
]
}]
}
]
}

{{option.name}
已选定：{{Selected}