設定v-treeview的多個子項屬性的方法
P粉852578075
2023-08-28 10:06:59
<p>假設我有以下結構的變數items：</p>
<pre class="brush:php;toolbar:false;">[
{
id: 1,
name: 'value1',
item_nested: [
{
id: 2,
name: 'value2',
},
{
id: 3,
name: 'value3',
nested_item: [
{
id: 4,
name: 'value4'
}
]
}
]
}
]</pre>
<p>在v-treeview中，我們有一個名為item-children的props，它接受一個字串，它允許設定哪個屬性將作為子項引用。在第一個層級中，我想將屬性<code>item_nested</code>作為子項，而在第二層級中，我想將<code>nested_item</code>作為子項，但是否可以設定多個值給item-children？ </p>
VTreeView使用一個string作為子項的鍵，所以- 在不擴展/覆蓋原始組件的情況下- 我看不到為子項提供替代鍵的方法。但是，你總是可以將你想要在
VTreeview中顯示的物件進行「重新鍵入」（這個程式碼片段只適用於這個特定情況，但可以推廣到其他情況）：new Vue({ el: '#app', vuetify: new Vuetify(), computed: { // "re-keying" items: modifiedTreeviewItems() { const updateItemKeys = (items) => { if (!items.length) return [] const mapped = items.map((item) => { const { item_nested = [], nested_item = [], ...rest } = item const children = item_nested.length ? item_nested : nested_item.length ? nested_item : [] return { ...rest, children: updateItemKeys(children), } }) return mapped } return updateItemKeys(this.treeviewItems) }, }, data() { return { treeviewItems: [{ id: 1, name: 'value1', item_nested: [{ id: 2, name: 'value2', }, { id: 3, name: 'value3', nested_item: [{ id: 4, name: 'value4' }] } ] }] } }, })<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <div id="app"> <v-app> <v-main> <v-container> <v-treeview :items="modifiedTreeviewItems" /> </v-container> </v-main> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>