Ivan/element-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
master
element-ui/examples/docs/fr-FR/table.md
Ivan c3c9fee2fb first
2021-06-07 11:56:04 +08:00

58 KiB
Raw Permalink Blame History

Table

Permet d'afficher de nombreuses données possédant un format similaire. Vous pouvez ainsi trier, filtrer et comparer les données de votre tableau.

Table basique

Un tableau de base pour afficher seulement.

:::demo Après avoir configuré l'attribut data de el-table avec un tableau d'objets, vous pouvez utiliser prop (correspondant à une clé dans chaque objet du tableau data) dans el-table-column pour insérer des données dans les colonnes, ainsi que l'attribut label pour définir le nom de la colonne. L'attribut width définit si besoin la largeur de la colonne.

  <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="Date"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Nom"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="Adresse">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles'
          }, {
            date: '2016-05-02',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles'
          }, {
            date: '2016-05-04',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles'
          }, {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles'
          }]
        }
      }
    }
  </script>

:::

Table rayée

Ajouter des couleurs différentes pour les lignes paires et impaires permet de lire le tableau plus facilement.

:::demo L'attribut stripe accepte un Boolean. Si true, le tableau sera rayé.

<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="Date"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Nom"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="Adresse">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }]
      }
    }
  }
</script>

:::

Table avec bordure

:::demo Par défaut, Table n'a pas de bordure verticale. Si vous en avez besoin, mettez l'attribut border à true.

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="Date"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Nom"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="Adresse">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }]
      }
    }
  }
</script>

:::

Table avec statut

Vous pouvez mettre en valeur certaines lignes du tableau suivant leur état, comme "success", "information", "warning", "danger" et d'autres.

:::demo Utilisez row-class-name dans el-table pour utiliser une fonction qui permettra ajouter des classes à certaines lignes. Vous pouvez ensuite définir les classes en question dans votre CSS.

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="date"
      label="Date"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Nom"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="Adresse">
    </el-table-column>
  </el-table>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
    data() {
      return {
        tableData:  [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }]
      }
    }
  }
</script>

:::

Table avec un header fixe

Lorsqu'il y a beaucoup de lignes, il peut être utile d'avoir un header fixe afin de ne pas perdre le nom de colonnes à mesure que l'utilisateur défile vers le bas.

:::demo En réglant l'attribut height de el-table, vous pouvez fixer le header sans avoir besoin de plus de code.

<template>
  <el-table
    :data="tableData"
    height="250"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="Date"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Nom"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="Adresse">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-08',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-06',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-07',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }],
      }
    }
  }
</script>

:::

Table avec colonnes fixes

Lorsque qu'il y a beaucoup de colonnes, il peut être utile d'en fixer certaines afin de ne pas perdre de vue leurs informations à mesure que l'utilisateur défile sur les cotés.

:::demo Utilisez l'attribut fixed de el-table-column qui accepte un Boolean. Si true, la colonne sera fixée à gauche. Il accepte aussi les valeurs 'left' et 'right', indiquant de quel coté la colonne doit être fixée.

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="Date"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Nom"
      width="120">
    </el-table-column>
    <el-table-column
      prop="state"
      label="État"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="Ville"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="Adresse"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="Zip"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="Opérations"
      width="120">
      <template slot-scope="scope">
        <el-button @click="handleClick" type="text" size="small">Detail</el-button>
        <el-button type="text" size="small">Editer</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        console.log('click');
      }
    },
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          tag: 'Home'
        }, {
          date: '2016-05-02',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          tag: 'Office'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          tag: 'Home'
        }, {
          date: '2016-05-01',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          tag: 'Office'
        }]
      }
    }
  }
</script>

:::

Table avec header et colonnes fixes

Si vous avez un gros volume de données à afficher, vous pouvez fixer le header et des colonnes en même temps.

:::demo Header et colonnes fixes combinant les deux exemples précédents.

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    height="250">
    <el-table-column
      fixed
      prop="date"
      label="Date"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Nom"
      width="120">
    </el-table-column>
    <el-table-column
      prop="state"
      label="État"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="Ville"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="Adresse"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="Zip"
      width="120">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-02',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-01',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-08',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-06',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-07',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }]
      }
    }
  }
</script>

:::

Hauteur fluide dans une Table avec header et colonnes fixes

Quand les données changent dynamiquement, vous pouvez avoir besoin d'une hauteur maximale et d'afficher une barre de défilement si besoin.

:::demo En utilisant l'attribut max-height de el-table, vous fixez le header. Le tableau ne défilera que si la hauteur des lignes dépasse cette hauteur maximale.

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    max-height="250">
    <el-table-column
      fixed
      prop="date"
      label="Date"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Nom"
      width="120">
    </el-table-column>
    <el-table-column
      prop="state"
      label="État"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="Ville"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="Adresse"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="Zip"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="Opérations"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.$index, tableData)"
          type="text"
          size="small">
          Supprimer
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      }
    },
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-02',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-01',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-08',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-06',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-07',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }]
      }
    }
  }
</script>

:::

Grouper les headers

Quand la structure du tableau est complexe, vous pouvez grouper les headers afin de montrer une hiérarchie.

:::demo Placez simplement el-table-column dans une autre el-table-column, et vous grouperez ainsi les headers.

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="Date"
      width="150">
    </el-table-column>
    <el-table-column label="Informations de livraison">
      <el-table-column
        prop="name"
        label="Nom"
        width="120">
      </el-table-column>
      <el-table-column label="Informations d'adresse">
        <el-table-column
          prop="state"
          label="État"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="Ville"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="Adresse"
          width="300">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="Zip"
          width="120">
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-02',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-01',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-08',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-06',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-07',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }]
      }
    }
  }
</script>

:::

Sélecteur simple

Vous pouvez activer la sélection d'une ligne.

:::demo Activez la sélection en ajoutant l'attribut highlight-current-row. L'évènement current-change se déclenchera à chaque changement de sélection, ses paramètres étant les deux lignes avant et après le changement: currentRow et oldCurrentRow. Si vous avez besoin d'afficher l'index des lignes, ajoutez une el-table-column avec pour type la valeur index, qui commencera à 1.

<template>
  <el-table
    ref="singleTable"
    :data="tableData"
    highlight-current-row
    @current-change="handleCurrentChange"
    style="width: 100%">
    <el-table-column
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      property="date"
      label="Date"
      width="120">
    </el-table-column>
    <el-table-column
      property="name"
      label="Nom"
      width="120">
    </el-table-column>
    <el-table-column
      property="address"
      label="Adresse">
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="setCurrent(tableData[1])">Sélectionner la deuxième ligne</el-button>
    <el-button @click="setCurrent()">Effacer la sélection</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }],
        currentRow: null
      }
    },

    methods: {
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      }
    }
  }
</script>

:::

Sélection multiple

Vous pouvez aussi sélectionner plusieurs lignes.

:::demo Ajoutez une el-table-column avec son type à selection. Cet exemple utilise aussi show-overflow-tooltip: par défaut, si le contenu est trop long, il se séparera en plusieurs lignes. Si vous souhaitez conserver une seule ligne, utilisez show-overflow-tooltip, qui accepte un Boolean. Si true, le contenu non affiché s'affichera dans le tooltip lorsque la souris passera sur la case.

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="Date"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      property="name"
      label="Nom"
      width="120">
    </el-table-column>
    <el-table-column
      property="address"
      label="Adresse"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">Sélectionner les deuxième et troisième lignes</el-button>
    <el-button @click="toggleSelection()">Effacer la sélection</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-08',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-06',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-07',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }],
        multipleSelection: []
      }
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

:::

Trier

Il est possible de trier les données afin de trouver plus facilement ce qu'on cherche.

:::demo Ajoutez l'attribut sortable a une colonne pour pouvoir trier cette colonne. Il accepte un Boolean et à false par défaut. Ajoutez default-sort pour déterminer les propriétés par défaut du tri. Pour appliquer vos propres règles, utilisez sort-method ou sort-by. Si vous avez besoin d'un tri dynamique depuis le serveur, mettez sortable à custom, et écoutez l'évènement sort-change de Table. Depuis cet évènement, vous aurez accès à la colonne et l'ordre de tri. cet exemple utilise aussi formatter pour formater les valeurs de colonnes. Il prend une fonction avec deux paramètres: row et column. Vous pouvez ainsi transformer les valeurs.

<template>
  <el-table
    :data="tableData"
    :default-sort = "{prop: 'date', order: 'descending'}"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="Date"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Nom"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="Adresse"
      :formatter="formatter">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }]
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      }
    }
  }
</script>

:::

Filtrer

Vous pouvez filtrer la table pour obtenir rapidement les lignes désirées.

:::demo Réglez filters et filter-method dans el-table-column pour rendre la colonne filtrable. filters prends un tableau, et filter-method est une fonction déterminant comment les lignes s'affichent. Elle prend trois paramètres: value, row et column.

<template>
  <el-button @click="resetDateFilter">Effacer le filtre date</el-button>
  <el-button @click="clearFilter">Effacer tout les filtres</el-button>
  <el-table
    ref="filterTable"
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="Date"
      sortable
      width="180"
      column-key="date"
      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
      :filter-method="filterHandler"
    >
    </el-table-column>
    <el-table-column
      prop="name"
      label="Nom"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="Adresse"
      :formatter="formatter">
    </el-table-column>
    <el-table-column
      prop="tag"
      label="Tag"
      width="100"
      :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag === 'Home' ? 'primary' : 'success'"
          disable-transitions>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          tag: 'Home'
        }, {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          tag: 'Office'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          tag: 'Home'
        }, {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          tag: 'Office'
        }]
      }
    },
    methods: {
      resetDateFilter() {
        this.$refs.filterTable.clearFilter('date');
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      }
    }
  }
</script>

:::

Template de colonne personnalisé

Vous pouvez customiser le contenu des colonnes afin de pouvoir utiliser d'autres composants.

:::demo Vous avez acccès aux données suivantes: row, column, $index et store (gestionnaire d'état de Table) grâce aux Scoped slot.

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="Date"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="Nom"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>Nom: {{ scope.row.name }}</p>
          <p>Addr: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      label="Opérations">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Editer</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Supprimer</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>

:::

Table avec header personnalisé

Vous pouvez également personnaliser le header de la table.

:::demo Vous pouvez personnaliser le header grâce aux slots avec portée.

<template>
  <el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <el-table-column
      label="Date"
      prop="date">
    </el-table-column>
    <el-table-column
      label="Name"
      prop="name">
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="Type to search"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Editer</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Supprimer</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-02',
          name: 'John',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Morgan',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-01',
          name: 'Jessy',
          address: 'No. 189, Grove St, Los Angeles'
        }],
        search: '',
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
  }
</script>

:::

Ligne extensible

Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas afficher de scrollbar, vous pouvez utiliser une ligne extensible.

:::demo Activer la ligne extensible en mettant type à expand et en utilisant un slot. Le contenu de el-table-column sera généré quand l'extension aura lieu, et vous avez aux même attributs que pour le slot des templates de colonnes.

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <p>État: {{ props.row.state }}</p>
        <p>Ville: {{ props.row.city }}</p>
        <p>Adresse: {{ props.row.address }}</p>
        <p>Zip: {{ props.row.zip }}</p>
      </template>
    </el-table-column>
    <el-table-column
      label="Date"
      prop="date">
    </el-table-column>
    <el-table-column
      label="Nom"
      prop="name">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-02',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-01',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-08',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-06',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }, {
          date: '2016-05-07',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036'
        }]
      }
    }
  }
</script>

:::

Arborescence et lazy loading

:::demo You can display tree structure data. When row contains the children field, it is treated as nested data. For rendering nested data, the prop row-key is required。Also, child row data can be loaded asynchronously. Set lazy property of Table to true and the function load. Specify hasChildren attribute in row to determine which row contains children. Both children and hasChildren can be configured via tree-props.

<template>
<div>
  <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    default-expand-all>
    <el-table-column
      prop="date"
      label="date"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Nom"
      sortable
      width="180">
    </el-table-column>
  </el-table>

  <el-table
    :data="tableData1"
    style="width: 100%"
    row-key="id"
    border
    lazy
    :load="load"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="date"
      label="Date"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Nom"
      width="180">
    </el-table-column>
  </el-table>
</div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
          id: 1,
          date: '2016-05-02',
          name: 'wangxiaohu'
        }, {
          id: 2,
          date: '2016-05-04',
          name: 'wangxiaohu'
        }, {
          id: 3,
          date: '2016-05-01',
          name: 'wangxiaohu',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: 'wangxiaohu'
            }, {
              id: 32,
              date: '2016-05-01',
              name: 'wangxiaohu'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: 'wangxiaohu'
        }],
        tableData1: [{
          id: 1,
          date: '2016-05-02',
          name: 'wangxiaohu'
        }, {
          id: 2,
          date: '2016-05-04',
          name: 'wangxiaohu'
        }, {
          id: 3,
          date: '2016-05-01',
          name: 'wangxiaohu',
          hasChildren: true
        }, {
          id: 4,
          date: '2016-05-03',
          name: 'wangxiaohu'
        }]
      }
    },
    methods: {
      load(tree, treeNode, resolve) {
        setTimeout(() => {
          resolve([
            {
              id: 31,
              date: '2016-05-01',
              name: 'wangxiaohu'
            }, {
              id: 32,
              date: '2016-05-01',
              name: 'wangxiaohu'
            }
          ])
        }, 1000)
      }
    },
  }
</script>

:::

Ligne de somme

Pour les tableaux de nombres, vous pouvez ajouter une ligne en plus pour afficher la somme de chaque colonne.

:::demo Mettez l'attribut show-summary à true dans el-table. Par défaut, la première colonne n'affiche que 'Sum' (vous pouvez configurer ce label avec sum-text), alors que les autres affichent la somme de chaque colonne. Vous pouvez choisir comment effectuer l'opération grâce à summary-method, qui doit retourner un tableau, cahque élément correspondant à la somme de chaque colonne. La deuxième table de cet exemple montre tout cela en pratique.

<template>
  <el-table
    :data="tableData"
    border
    show-summary
    style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Nom">
    </el-table-column>
    <el-table-column
      prop="amount1"
      sortable
      label="Quantité 1">
    </el-table-column>
    <el-table-column
      prop="amount2"
      sortable
      label="Quantité 2">
    </el-table-column>
    <el-table-column
      prop="amount3"
      sortable
      label="Quantité 3">
    </el-table-column>
  </el-table>

  <el-table
    :data="tableData"
    border
    height="200"
    :summary-method="getSummaries"
    show-summary
    style="width: 100%; margin-top: 20px">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Nom">
    </el-table-column>
    <el-table-column
      prop="amount1"
      label="Coût 1 ($)">
    </el-table-column>
    <el-table-column
      prop="amount2"
      label="Coût 2 ($)">
    </el-table-column>
    <el-table-column
      prop="amount3"
      label="Coût 3 ($)">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '12987122',
          name: 'Tom',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: 'Tom',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: 'Tom',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: 'Tom',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: 'Tom',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
      };
    },
    methods: {
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = 'Coût total';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = '$ ' + values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      }
    }
  };
</script>

:::

Étendue des lignes et colonnes

Vous pouvez configurer l'étendue des lignes et colonnes afin de fusionner des cellules.

:::demo Utilisez span-method pour configurer chaque étendue. Il accepte une fonction, et lui passe un objet incluant la ligne actuelle row, la colonne actuelle column, l'index de la ligne rowIndex et l'index de la colonne columnIndex. La fonction doit retourner un tableau contenant deux nombres, le premier étant rowspan et le second colspan. Elle peut aussi retourner un objet avec les propriétés rowspan et colspan.

<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Nom">
      </el-table-column>
      <el-table-column
        prop="amount1"
        sortable
        label="Quantité 1">
      </el-table-column>
      <el-table-column
        prop="amount2"
        sortable
        label="Quantité 2">
      </el-table-column>
      <el-table-column
        prop="amount3"
        sortable
        label="Quantité 3">
      </el-table-column>
    </el-table>

    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Nom">
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="Quantité 1">
      </el-table-column>
      <el-table-column
        prop="amount2"
        label="Quantité 2">
      </el-table-column>
      <el-table-column
        prop="amount3"
        label="Quantité 3">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '12987122',
          name: 'Tom',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: 'Tom',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: 'Tom',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: 'Tom',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: 'Tom',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
      };
    },
    methods: {
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    }
  };
</script>

:::

Indices personnalisés

Vous pouvez personnaliser les indices des colonnes de type index.

:::demo Utilisez l'attribut index sur une el-table-column avec type=index. Si un nombre est assigné, tout les indices auront un décalage égal à ce nombre. Il peut aussi prendre une fonction avec chaque indice (commençant à 0) comme paramètre, et la valeur de retour sera affichée en tant qu'indice.

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      type="index"
      :index="indexMethod">
    </el-table-column>
    <el-table-column
      prop="date"
      label="Date"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Nom"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="Adresse">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          tag: 'Home'
        }, {
          date: '2016-05-02',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          tag: 'Office'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          tag: 'Home'
        }, {
          date: '2016-05-01',
          name: 'Tom',
          state: 'California',
          city: 'Los Angeles',
          address: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          tag: 'Office'
        }],
      }
    },
    methods: {
      indexMethod(index) {
        return index * 2;
      }
    }
  };
</script>

:::

Attributs de Table

Attribut Description Type Valeurs acceptées Défaut
data Les données de la table. array — —
height La hauteur de la table. Par défaut la hauteur est auto. Si sa valeur est un nombre, la hauteur est en px; si c'est un string, la valeur est assigné au style.height de l'élement. La hauteur est affectée par les styles externes. string/number — —
max-height Table's max-height. The legal value is a number or the height in px. string/number — —
stripe Si la table est rayée. boolean — false
border Si la table à une bordure verticale. boolean — false
size Taille de la table. string medium / small / mini —
fit Si la largeur des colonnes s'adapte au conteneur. boolean — true
show-header Si le header de la table est visible. boolean — true
highlight-current-row Si la ligne courante est mise en valeur. boolean — false
current-row-key Clé de la ligne actuelle. Propriété set-only. string,number — —
row-class-name Fonction qui retourne un nom de classe pour chaque ligne. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne. Function({row, rowIndex})/String — —
row-style Fonction qui retourne un style pour chaque ligne. Peut aussi être un objet assignant un style à chaque ligne. Function({row, rowIndex})/Object — —
cell-class-name Fonction qui retourne un nom de classe pour chaque cellule. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule. Function({row, column, rowIndex, columnIndex})/String — —
cell-style Fonction qui retourne un style pour chaque cellule. Peut aussi être un objet assignant un style à chaque cellule. Function({row, column, rowIndex, columnIndex})/Object — —
header-row-class-name Fonction qui retourne un nom de classe pour chaque ligne de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne de header. Function({row, rowIndex})/String — —
header-row-style Fonction qui retourne un style pour chaque ligne de header. Peut aussi être un objet assignant un style à chaque ligne de header. Function({row, rowIndex})/Object — —
header-cell-class-name Fonction qui retourne un nom de classe pour chaque cellule de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule de header. Function({row, column, rowIndex, columnIndex})/String — —
header-cell-style Fonction qui retourne un style pour chaque cellule de header. Peut aussi être un objet assignant un style à chaque cellule de header. Function({row, column, rowIndex, columnIndex})/Object — —
row-key Clé de chaque ligne, utilisée pour optimiser le rendu. Requise si reserve-selection est activé. Quand c'est un String, l'accès multi-niveaux est supporté, e.g. user.info.id, mais user.info[0].id n'est pas supporté. Dans ce dernier cas une Function devrait être utilisée. Function(row)/String — —
empty-text Texte à afficher quand il n'y a pas de données. Vous pouvez changer cette zone grâce à slot="empty". String — No Data
default-expand-all whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data Boolean — false
expand-row-keys Détermine les lignes qui sont étendues, contient les clés des lignes correspondantes. Vous devriez configurer row-key avant celle-ci. Array —
default-sort Détermine l'ordre de tri par défaut. La propriété prop détermine la colonne par défaut, order détermine l'ordre par défaut. Object order: ascending, descending Si order est absent, son défaut sera ascending.
tooltip-effect Propriété effect de Tooltip. String dark/light
show-summary Si une ligne de somme doit apparaître. Boolean — false
sum-text Le label de la première cellule de la ligne de somme. String — Sum
summary-method La méthode pour calculer la somme. Function({ columns, data }) — —
span-method Méthode qui retourne les valeurs de colspan et rowspan. Function({ row, column, rowIndex, columnIndex }) — —
select-on-indeterminate Contrôle le comportement de la checkbox globale dans les tables avec sélection multiple lorsque seulement certaines lignes sont sélectionnées. Si true, toutes les lignes sont sélectionnées. Boolean — true
indent horizontal indentation of tree data Number — 16
lazy whether to lazy loading data Boolean — —
load method for loading child row data, only works when lazy is true Function({ row, treeNode, resolve }) — —
tree-props configuration for rendering nested data Object — { hasChildren: 'hasChildren', children: 'children' }

Évènements de Table

Nom Description Paramètres
select Se déclenche quand l'utilisateur clique sur la checkbox d'une ligne. selection, row
select-all Se déclenche quand l'utilisateur clique sur la checkbox du header. selection
selection-change Se déclenche quand la selection change. selection
cell-mouse-enter Se déclenche quand la souris passe sur une cellule. row, column, cell, event
cell-mouse-leave Se déclenche quand la souris sort d'une cellule. row, column, cell, event
cell-click Se déclenche quand l'utilisateur clique sur une cellule. row, column, cell, event
cell-dblclick Se déclenche quand l'utilisateur double-clique sur une cellule. row, column, cell, event
row-click Se déclenche quand l'utilisateur clique sur une ligne. row, column, event
row-contextmenu Se déclenche quand l'utilisateur fait un clic droit sur une ligne. row, column, event
row-dblclick Se déclenche quand l'utilisateur double-clique sur une ligne. row, column, event
header-click Se déclenche quand l'utilisateur clique sur une colonne du header. column, event
header-contextmenu Se déclenche quand l'utilisateur fait un clic droit sur une colonne du header. column, event
sort-change Se déclenche quand l'ordre de tri change. { column, prop, order }
filter-change column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered. filters
current-change Se déclenche quand la ligne sélectionnée change. currentRow, oldCurrentRow
header-dragend Se déclenche après un changement de taille de colonne en déplaçant la ligne verticale du header. newWidth, oldWidth, column, event
expand-change triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded) row, (expandedRows | expanded)

Méthodes de Table

Méthode Description Paramètres
clearSelection Dans les tables avec sélection multiple, efface la sélection. —
toggleRowSelection Dans les tables avec sélection multiple, change la sélection d'une ligne. Grâce au deuxième paramètre vous pouvez directement décider si cette ligne est sélectionnée. row, selected
toggleAllSelection Utilisé dans les tables à sélection multiples, sélectionne toutes les lignes. -
toggleRowExpansion used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed row, expanded
setCurrentRow Dans les tables à sélection simple, sélectionne une ligne. Sans paramètre la sélection est effacé. row
clearSort Efface le tri. —
clearFilter Efface les filtres des colonnes dont les columnKey sont passées. Si aucun paramètre, efface tout les filtres. columnKeys
doLayout Rafraîchi le layout de la table. Quand la visibilité de la table change vous aurez peut-être besoin de cette méthode pour corriger le layout. —
sort Tri la table manuellement. La proriété prop détermine la colonne, order détermine l'ordre de tri. prop: string, order: string

Slots de Table

Nom Description
append Contenu à insérer après la dernière ligne. Vous aurez sans doute besoin de ce slot si vous implémentez un scroll infini. Il sera affiché au-dessus de la ligne de somme s'il y en a une.

Attributs de Table-column

Attribut Description Type Valeurs acceptées Défaut
type Type de la colonne. Si mis à selection, la colonne affichera des checkbox. Si mis à index, la colonne affichera l'indice de la ligne (début à 1). Si mis à expand, affichera l'icône d'extension. string selection/index/expand —
index Personnalise les indices de chaque ligne, marche avec les colonnes type=index. number, Function(index) - -
label Label de la colonne. string — —
column-key La clé de la colonne. Si vous avez besoin d'utiliser l'évènement filter-change, vous aurez besoin de cet attribut pour savoir quelle colonne est filtrée. string string —
prop Nom du champ de l'objet de données. Alias: property. string — —
width Largeur de la colonne. string — —
min-width Largeur minimale de la colonne. Les colonnes avec width ont une largeur fixe, alors que celles avec min-width ont une largeur proportionnellement distribuée. string — —
fixed Si la colonne est fixée à droite ou à gauche. Fixée à gauche si true. string/boolean true/left/right —
render-header Fonction de rendu pour le header de cette colonne. Function(h, { column, $index }) — —
sortable Si la colonne peut être triée. Tri dynamique possible en mettant à 'custom' et en écoutant l'évènement sort-change de Table. boolean, string true, false, custom false
sort-method Méthode de tri, marche quand sortable est true. Doit retourner un nombre, tout comme Array.sort. Function(a, b) — —
sort-by Détermine par quelle propriété effectuer le tri, marche quand sortable est true et sort-method est undefined. Si c'est un Array, sera triée par la propriété suivante si la précédente est équivalente. Function(row, index)/String/Array — —
sort-orders Liste des stratégies de tri, marche quand sortable est true. Accepte un tableau. Lorsque l'utilisateur clique plusieurs fois sur le header, la colonne est triée dans l'ordre des stratégies indiquée. array Les élements du tableau doivent être parmi: ascending, descending et null (restaure l'état originel du tableau). ['ascending', 'descending', null]
resizable Si la largeur de la colonne peut être modifiée, marche quand border de el-table est true. boolean — false
formatter Fonction pour formater le contenu des cellules. Function(row, column, cellValue, index) — —
show-overflow-tooltip Si du contenu trop long doit être caché et affiché dans une tooltip quand la souris passe sur la cellule. boolean — false
align Alignement. string left/center/right left
header-align Alignement du header. Si omis, la valeur du align ci-dessus est appliqué. String left/center/right —
class-name Classe des cellules dans cette colonne. string — —
label-class-name Classe du label de cette colonne. string — —
selectable Détermine si certaines colonnes peuvent être sélectionnées, marche quand type est 'selection'. Function(row, index) — —
reserve-selection Si la sélection doit être conservée après rafraîchissement, marche quand type est 'selection'. Notez que row-key est requis. boolean — false
filters Un tableau d'options de filtrage. Pour chaque élément, text et value sont requis. Array[{ text, value }] — —
filter-placement Emplacement du menu du filtre. String Voir placement de Tooltip. —
filter-multiple Si le filtrage supporte plusieurs options. Boolean — true
filter-method Méthode de filtrage. Si filter-multiple est activé, cette méthode sera appelé plusieurs fois pour chaque ligne, qui sera affichée si dès qu'un true sera renvoyé. Function(value, row, column) — —
filtered-value Valeur de filtre pour les colonnes sélectionnées, peut être utile quand le header est rendu avec render-header. Array — —

Slot de Table-column

Nom Description
— Contenu personnalisé pour les colonnes. Les paramètres sont { row, column, $index }
header Contenu personnalisé pour le header. Le paramètre de scope est { column, $index }