3
votes

Comment parcourir les enfants d'un composant Vue

J'ai la structure actuelle dans mon composant:

mounted: function() {
    this.$slots.column.forEach(
        //my code...
    );
}

Comment parcourir ces "colonnes" lors du rendu de ma table de données ?

Edit: il s'avère que l'ajout de références à mes colonnes n'a pas fonctionné, car selon la documentation, les références ne sont stockées dans leur variable que lorsque les composants sont réellement rendus. Au lieu de cela, j'ai utilisé la variable $ slots pour parcourir les colonnes de la méthode montée , comme ceci:

<data-table>
    <template slot="column" field="a"></template>
    <template slot="column" field="b"></template>
    <template slot="column" field="c"></template>
</data-table>

p >

javascript vue.js

1 commentaires

Vous pouvez attribuer une ref à chacun d'eux vuejs.org/v2/guide/... (peut-être pas la meilleure solution, mais la première qui m'est venue à l'esprit), c'est-à-dire

3 Réponses :

0
votes

Avez-vous essayé une itération v-for lors du rendu de votre table de données ?, et créé les colonnes basées sur une propriété de données?

Tels que:

0 commentaires

6
votes

Comme mentionné, $ ref est la meilleure approche pour faire ce que vous voulez. Utilisez ref avec précaution. Cela peut devenir lourd sur la machine de l'utilisateur.

// template

{
  ...
  mounted() {
    this.$refs.columns.forEach(col => {
      // Do something with `col`
      console.log(col)
    })
  }
}

// script code >

<data-table>
    <template slot="column" field="a" ref="columns"></template>
    <template slot="column" field="b" ref="columns"></template>
    <template slot="column" field="c" ref="columns"></template>
</data-table>

En gros, si vous avez plus de 1 ref avec un nom identique (comme 'colonnes' ), cette référence sera convertie en un VueComponent [] (c'est-à-dire un tableau de composants vue).

2 commentaires

Je n'avais aucune idée que les arbitres géraient plusieurs éléments de manière aussi fluide. Sucré!

this. $ refs.columns est indéfini lorsque j'essaye de vérifier la longueur du tableau

0
votes

Lorsque vous créez des emplacements, vous pouvez définir des noms dynamiques. Exemple de composant:

<data-table>
    <template slot="col1" slot-scope="{data}"></template>
    <template slot="col2" slot-scope="{data}></template>
    <template slot="col3" slot-scope="{data}></template>
</data-table>

puis utilisez les emplacements:

<table>
  <tr>
    <td v-for="(slot,ind) in loopdata">
     <slot :name="'col'+ind" :data="slot"></slot>
    </td>
  </tr>
</table>

0 commentaires