Question

我具有带树形视图的自定义数据数组，用于选择选项：

23/10/1440

如何在[ { "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" }, ] } ] } ]标签optionts中显示树形视图数组，如下所示：

<select>

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

<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>

Answer 1

像这样吗？

 Sub CopyFiltred2()
Dim StartCell As Range
Dim StartCell2 As Range
ActiveSheet.AutoFilter.Range.Copy


Set StartCell = Excel.Application.InputBox("Range?" & vbNewLine & "Please select the cell:" _
                                , "Insert Table of Contents", , , , , , 8)

StartCell.Select
Selection.PasteSpecial
End Sub

new Vue({
  el: '#app',
  data() {
    return {
      options: getData(),
      selected: null
    }
  },
  computed: {
    selectOptions() {
      const tree = this.options
      const flat = []

      add(this.options, '')

      return flat

      function add(nodes, prefix) {
        nodes.forEach(node => {
          flat.push({
            ...node,
            name: prefix + node.name
          })

          add(node.children || [], prefix + '- ')
        })
      }
    }
  }
})

function getData() {
  return [{
      "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"
          },
        ]
      }]
    }
  ]
}

我正在使用计算属性保留树的展平版本，并进行一些递归来进行展平。

Answer 2

您可以在mounted()中加载选项，尝试执行以下操作：

mounted(){
  this.makeOptions();
},
methods: {
   makeOptions() {
      this.data.forEach( item => {
          this.opions.push({ value: item.id, label: item.name })
          if (item.children && item.children.length) {
              this.item.children.forEach(child => { 
                  this.opions.push({ value: child.id, label: child.name })
              })
          }
      })
   }

}

您可以通过options循环进入模板。祝你好运！

如何在选择标签选项中正确显示数组子元素

2 个答案: