Bagaimana untuk menetapkan atribut berbilang subitem v-treeview
P粉852578075
P粉852578075 2023-08-28 10:06:59
0
1
504
<p>Andaikan saya mempunyai item pembolehubah dengan struktur berikut: </p> <pre class="brush:php;toolbar:false;">[ { id: 1, nama: 'nilai1', item_nested: [ { id: 2, nama: 'nilai2', }, { id: 3, nama: 'nilai3', nested_item: [ { ID: 4, nama: 'nilai4' } ] } ] } ]</pre> <p>Dalam v-treeview kami mempunyai prop yang dipanggil item-children yang menerima rentetan yang membenarkan untuk menetapkan sifat mana yang akan dirujuk sebagai kanak-kanak. Di peringkat pertama saya mahu mempunyai atribut <code>item_nested</code> sebagai kanak-kanak dan dalam tahap kedua saya mahu mempunyai <code>nested_item</code> Berbilang nilai untuk kanak-kanak item? </p>
P粉852578075
P粉852578075

membalas semua(1)
P粉850680329

VTreeView使用一个string sebagai kunci kanak-kanak, jadi - tanpa melanjutkan/menimpa komponen asal - saya tidak nampak cara untuk menyediakan kunci alternatif untuk kanak-kanak itu.

Walau bagaimanapun, anda sentiasa boleh "menaip semula" objek yang anda mahu dipaparkan dalam VTreeview (coretan kod ini hanya digunakan untuk kes khusus ini, tetapi boleh digeneralisasikan kepada kes lain):

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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!