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