So legen Sie die Attribute mehrerer Unterelemente von V-Treeview fest
P粉852578075
2023-08-28 10:06:59
<p>Angenommen, ich habe die variablen Elemente mit der folgenden Struktur:</p>
<pre class="brush:php;toolbar:false;">[
{
ID: 1,
Name: 'Wert1',
item_nested: [
{
ID: 2,
Name: 'Wert2',
},
{
ID: 3,
Name: 'Wert3',
verschachteltes_Element: [
{
ID: 4,
Name: 'Wert4'
}
]
}
]
}
]</pre>
<p>In v-treeview haben wir eine Requisiten namens item-children, die eine Zeichenfolge akzeptiert, mit der festgelegt werden kann, auf welche Eigenschaft als Kind verwiesen wird. In der ersten Ebene möchte ich das Attribut <code>item_nested</code> als untergeordnetes Element haben und in der zweiten Ebene möchte ich das <code>nested_item</code> als untergeordnetes Element haben, aber ist es möglich, es festzulegen? Mehrere Werte für Item-Kinder? </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>