Detaillierte Analyse des Quellcodes der Element UI-Tabellenkomponente

Dieser Artikel beginnt mit der grundlegendsten Tabelle, wie in der Abbildung unten gezeigt, und analysiert den Quellcode der Tabellenkomponente. Ich habe den ursprünglichen Quellcode der Tabellenkomponente gekürzt. In diesem Artikel werden nur die wichtigen Codeausschnitte erläutert. Es wird empfohlen, den Code zum Ausführen des Projekts herunterzuladen und zusammen mit dem Artikel zu lesen.

Idee

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

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

    <p>
      <table-body>                  
      </table-body>
    </p>
  
</template>

Tabelle, Tabellenkopf, Tabellenkörper und Tabellenspalte werden über den Tabellenspeicher verwaltet. Tabellenkopf und Tabellenkörper überwachen Tabellenspeicherdaten und veranlassen, dass Tabellenkopf und Tabellenkörper neu gerendert werden, wenn die Tabelle die Tabellenspeicherdaten ändert.

table-column bindet die entsprechende renderCell-Funktion an die Spaltendatenspalte zur Verwendung beim Rendern des Tabellenkörpers. Die Tabellenspaltenkomponente selbst führt kein Rendering durch. Sie werden also sehen, dass die Vorlage es verbirgt. Es gibt auch Tabellenkopf und Tabellenkörper, die über die Renderfunktion gerendert werden.

Initialisierungssequenz

Tabelle

1. Speicher initialisieren

   data() {
     const store = new TableStore(this);
     return {
       store,
     };
   }

2. Speicher für Tabellenkopf und Tabellenkörper freigeben

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

3. Daten speichern, um sie für den Tabellenkörper zu speichern ruft Daten ab und rendert sie

   watch: {
       data: {
         immediate: true,
         handler(value) {
           // 供 table-body computed.data 使用 
           this.store.commit('setData', value);
           // ......
         }
       },
   },

4. Tabellen-ID festlegen

   created() {
         //.....
         this.tableId = `el-table_${tableIdSeed}`;
         //.....
     }

5. UpdateColumns aufrufen, um Tabellenkopf- und Tabellenkörper-Sekundärrenderaktualisierung auszulösen und als montiert zu markieren abgeschlossen

   mounted() {
       // .....
       this.store.updateColumns();
       // .....
       this.$ready = true;
   }

table-column

1. Spalte generieren und Spaltenbindung bereitstellen renderCell函数 table-body verwendet

   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>;
         };
     
   }

2. um das Array „store.state._columns“ mit Daten zu füllen

   mounted() {
       // ...... 
       owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null);
   }

table-store

Table-Store verfügt über zwei sehr wichtige Attribute: _columns und data speichert die relevanten Informationen der Spalten, und data speichert die vom Entwickler übergebenen Tabellendaten. Es gibt auch zwei wichtige Funktionen insertColumn und updateColumns.

1. insertColumn füllt Daten für _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);
       }
   
       // .....
     },
   }

2. updateColumns filtert _columns, um Spalten zu erhalten

   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);
     // ....
   }

Tabellenkopf, Tabellenkörper

Tabellenkopf und Tabellenkörper haben beide die folgenden Attribute

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

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

render(){
    // 渲染columns的数据
}

Das Funktionsprinzip dieser beiden Komponenten besteht darin, Spaltendatenänderungen zu überwachen um das Rendern auszulösen. In der gemounteten Phase der Tabellenkomponente wird updateColumns aufgerufen, um die Spalten zu aktualisieren, wodurch ein erneutes Rendern von Tabellenkopf und Tabellenkörper ausgelöst wird.

Darüber hinaus überwacht der Tabellenkörper auch Datenänderungen und löst das Rendern aus. Wenn beispielsweise die Komponente geladen wird, wird eine Anfrage gesendet, der Anfrageantwort werden Daten zugewiesen und der Tabellenkörper wird neu gerendert.

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

Verwandte Empfehlungen:

Analyse der Gründe für die Bindung in React-Komponenten

Analyse von asynchronen Batch-Updates und nextTick-Prinzipien im Vue-Quellcode

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse des Quellcodes der Element UI-Tabellenkomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!