Maison > interface Web > js tutoriel > Analyse détaillée du code source du composant de table Element UI

Analyse détaillée du code source du composant de table Element UI

不言
Libérer: 2018-07-25 10:23:39
original
3972 Les gens l'ont consulté

Cet article commence par le tableau le plus basique, comme indiqué dans la figure ci-dessous, et analyse le code source du composant du tableau. J'ai réduit le code source original du composant table. Cet article explique uniquement les extraits de code importants. Il est recommandé de télécharger le code pour exécuter le projet et de lire l'article.

Idée

<template>
  <p>
    <!-- 隐藏列: slot里容纳table-column -->
    </p>
<p>
      <slot></slot>
    </p>

    <p>
      <table-header>
      </table-header>
    </p>

    <p>
      <table-body>                  
      </table-body>
    </p>
  
</template>
Copier après la connexion

Table, en-tête de table, corps de table et colonne de table sont gérés via table-store. l'en-tête de table et le corps de la table surveillent les données du magasin de table et déclenchent le rendu de l'en-tête et du corps de la table chaque fois que la table modifie les données du magasin de table.

table-column lie la fonction renderCell correspondante à la colonne de données de la colonne à utiliser lors du rendu du corps de la table. Le composant table-colonne lui-même n’effectue aucun rendu. Vous verrez donc que le modèle le cache. Il existe également un en-tête et un corps de table qui sont rendus via la fonction de rendu.

Séquence d'initialisation

Analyse détaillée du code source du composant de table Element UI

tableau

  1. Initialiser le magasin

    data() {
      const store = new TableStore(this);
      return {
        store,
      };
    }
    Copier après la connexion
  2. Partager le magasin avec l'en-tête de la table, le corps de la table

        <p>
          <table-header></table-header>
        </p>
    
        <p>
          <table-body></table-body>
        </p>
    Copier après la connexion
  3. Les données du magasin Aller à stocker le corps de la table pour obtenir des données et les restituer

    watch: {
        data: {
          immediate: true,
          handler(value) {
            // 供 table-body computed.data 使用 
            this.store.commit('setData', value);
            // ......
          }
        },
    },
    Copier après la connexion
  4. Définir tableId

    created() {
          //.....
          this.tableId = `el-table_${tableIdSeed}`;
          //.....
      }
    Copier après la connexion
  5. Appelez updateColumns pour déclencher l'en-tête de table , mise à jour du rendu secondaire du corps de la table, marque montée terminée

    mounted() {
        // .....
        this.store.updateColumns();
        // .....
        this.$ready = true;
    }
    Copier après la connexion

table-column

  1. générer la colonne, et lier la colonne renderCell函数 pour une utilisation dans le corps de la table

    created(){
          // .........
          let column = getDefaultColumn(type, {
              id: this.columnId,
              columnKey: this.columnKey,
              label: this.label,
              property: this.prop || this.property,// 旧版element ui为property,现在的版本是prop
              type, // selection、index、expand
              renderCell: null,
              renderHeader: this.renderHeader, // 提供给table-column, table-column.js line 112
              width,
              formatter: this.formatter,
              context: this.context,
              index: this.index,
            });
          // .........
          
          // 提table-body使用, table-body.js line 69
          column.renderCell = function (createElement, data) {
            if (_self.$scopedSlots.default) {
              renderCell = () => _self.$scopedSlots.default(data);
              //<template>
              //<span>{{row.frequentlyUsed | formatBoolean}}</span>
              //</template>
            }
      
            if (!renderCell) {// table-header不渲染index列的走这里,
              /*<p>王小虎</p>*/
              renderCell = DEFAULT_RENDER_CELL;
            }
      
            //  <eltablecolumn></eltablecolumn>
            return <p>{renderCell(createElement, data)}</p>;
          };
      
    }
    Copier après la connexion
  2. remplir le tableau store.state._columns avec des données

    mounted() {
        // ...... 
        owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null);
    }
    Copier après la connexion

table-store

table-store a deux attributs très importants _columns et data _columns enregistre les informations pertinentes des colonnes, et data enregistre les données de la table transmises par le développeur. Il existe également deux fonctions importantes insertColumn et updateColumns.

  1. insertColumn remplit les données pour _columns

    TableStore.prototype.mutations = {
      insertColumn(states, column, index, parent) {
        let array = states._columns;
        // ......
    
        if (typeof index !== 'undefined') {
          // 在index的位置插入column
          array.splice(index, 0, column);
        } else {
          array.push(column);
        }
    
        // .....
      },
    }
    Copier après la connexion
  2. updateColumns filtre _columns pour obtenir des colonnes

    TableStore.prototype.updateColumns = function() {
      const states = this.states;
      const _columns = states._columns || [];
      
      const notFixedColumns = _columns.filter(column => !column.fixed);
      // .....
      const leafColumns = doFlattenColumns(notFixedColumns);
      // .....
      
      states.columns = [].concat(leafColumns);
      // ....
    }
    Copier après la connexion

table-header, table-body

table-header, table-body ont tous deux les attributs suivants

props: {
    store: {
      required: true
    },
}

computed: {
    columns() {
      return this.store.states.columns;
    },
},

render(){
    // 渲染columns的数据
}
Copier après la connexion

de ces deux composants Le principe de fonctionnement consiste à surveiller les modifications dans les données des colonnes pour déclencher le rendu. Dans la phase montée du composant table, updateColumns sera appelé pour mettre à jour les colonnes, déclenchant ainsi le rendu de l'en-tête et du corps de la table.

De plus, table-body surveillera également les modifications des données et déclenchera le rendu. Par exemple, lorsque le composant est chargé, une requête est envoyée, les données sont affectées à la réponse à la requête et le corps de la table est restitué.

  computed: {
    data() {
      // table.vue watch.data 中 调用 setData 在store 中存储 data
      return this.store.states.data;
    },
  },
Copier après la connexion

Recommandations associées :

Analyse des raisons de la liaison dans les composants React

Analyse des mises à jour asynchrones par lots et des principes nextTick dans Vue code source

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal