2
votes

Colonne de table de l'interface utilisateur d'élément qui utilise la portée de l'emplacement Problème "Impossible de lire la propriété 'nom_colonne' d'undefined"

Quelqu'un ici utilise le framework element ui? https://element.eleme.io/#/en-US/ J'utilise son composant table et j'utilise slot-scope sur ses colonnes. Cela fonctionne bien jusqu'à ce que je lance la mise à jour npm qui, bien sûr, met à jour les packages. Maintenant, la console a beaucoup d'erreurs. Et plus tard, j'ai découvert que ce champ d'application de la colonne de table causait le problème.

Toute aide serait très appréciée. Voici un violon du problème.

https://jsfiddle.net/ japhfortin / jkzma0v8 / 3 /

  <el-table :data=list>
    <el-table-column label="First Name">
      <template slot-scope="scope">{{ scope.row.first_name }}</template>
    </el-table-column>
    <el-table-column prop="last_name" label="Last Name">
    </el-table-column>
  </el-table>

  data() {
    return {
      input: '',
      list: [
      {
        first_name: 'Foo',
        last_name: 'Bar'
      }
      ]
    }
  },

vue.js vuejs2 element-ui

1 commentaires

J'ai un problème similaire et ma solution consiste simplement à restaurer ma version vue jusqu'à ce que l'élément soit mis à jour pour prendre en charge la nouvelle syntaxe de slot. Voir github.com/ElemeFE/element/issues/14303

3 Réponses :

2
votes

L'erreur est levée car la valeur scope est un objet vide sur le premier rendu. Cela signifie que la ligne d'objet est indéfinie et qu'elle lance. Vous devez vérifier que la valeur row est définie avant d'y accéder. Vous pouvez également utiliser leur autre forme pour lier la valeur à la colonne. Cela dépend de votre cas d'utilisation.

<el-table :data="list">
  <el-table-column label="First Name">
    <template slot-scope="scope" v-if="scope.row">
      {{ scope.row.first_name }}
    </template>
  </el-table-column>
  <el-table-column prop="last_name" label="Last Name"> </el-table-column>
</el-table>

Vous pouvez également utiliser un v-if sur le scope.row pour vous assurer que la valeur est présent au moment du rendu.

<el-table :data="list">
  <el-table-column prop="first_name" label="First Name"> </el-table-column>
  <el-table-column prop="last_name" label="Last Name"> </el-table-column>
</el-table>

2 commentaires

fait-il partie de la mise à jour de vuejs ou de la mise à jour de l'interface utilisateur de l'élément? Parce que tout fonctionnait bien avant. Leur documentation contient également cet exemple de portée d'emplacement - element.eleme. io / # / fr-FR / component / table # multiple-select Et je dois ajouter quelque chose à l'intérieur de la cellule qui utilise les données à l'intérieur, c'est pourquoi j'avais besoin de ce slot-scope pour fonctionner.

Vous pouvez utiliser un v-if sur scope.row pour vous assurer que la valeur est présente. J'ai mis à jour mon exemple.

1
votes

Le problème se produit à cause de la nouvelle syntaxe de slot dans Vue. Plus d'informations sur https: // github .com / vuejs / rfcs / blob / master / active-rfcs / 0001-new-slot-syntax.md

Emplacement par défaut avec texte

<el-table :data="list">
    <el-table-column label="First Name" v-slot="scope">
        {{ scope.row.first_name }}
    </el-table-column>
    <el-table-column prop="last_name" label="Last Name">
    </el-table-column>
</el-table>

Un autre exemple utilisant le composant Table de l'élément UI.

Remarque: Mettez à niveau Vue vers la dernière version, actuellement il s'agit de la 2.6.3.

<!-- old -->
<foo>
    <template slot-scope="scope">
        {{ scope}}
    </template>
</foo>

<!-- new -->
<foo v-slot="scope">
    {{ scope}}
</foo>

p >

0 commentaires

0
votes

Le problème est résolu sur Vue@2.6.3

0 commentaires