Maison > Questions et réponses > le corps du texte
P粉8506803292023-08-29 00:50:29
VTreeView
使用一个string
comme clé de l'enfant, donc - sans étendre/écraser le composant d'origine - je ne vois pas de moyen de fournir une clé alternative à l'enfant.
Cependant, vous pouvez toujours "retaper" l'objet dans lequel vous souhaitez être affiché VTreeview
(cet extrait de code ne s'applique qu'à ce cas précis, mais peut être généralisé à d'autres cas) :
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>