Element UI table組件源碼分析

本文章從以下圖所示的最基本的table入手，分析table組件源代碼。本人已經對table組件原來的源碼進行削減，源碼點擊這裏下載。本文只對重要的代碼片斷進行講解，推薦下載代碼把項目運行起來，跟着文章的思路閱讀。

思路

<div class="el-table">
    <!-- 隱藏列: slot裏容納table-column -->
    <div class="hidden-columns" ref="hiddenColumns">
      <slot></slot>
    </div>

    <div class="el-table__header-wrapper"
         ref="headerWrapper">
      <table-header ref="tableHeader"
                    :store="store">
      </table-header>
    </div>

    <div class="el-table__body-wrapper"
         ref="bodyWrapper">
      <table-body :context="context"
                  :store="store">                  
      </table-body>
    </div>
  </div>
</template>

table、table-header、table-body、table-column之間經過table-store進行狀態管理。table-header、table-body對table-store數據進行監聽，每當table改變table-store數據時觸發table-header、table-body從新渲染。

table-column爲列數據column綁定相應的renderCell函數，供table-body渲染時使用。table-column這個組件自身不作任何渲染。因此會看到模板將其隱藏。還有就是table-header、table-body經過render函數進行渲染。

初始化順序

table

1. 初始化store

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

2. 將store共享給table-header、table-body

   ``` <div class="el-table__header-wrapper" ref="headerWrapper"> <table-header :store="store"></table-header> </div> <div class="el-table__body-wrapper" ref="bodyWrapper"> <table-body :store="store"></table-body> </div> ```

3. 將數據存儲到store，供table-body獲取data將其渲染

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

4. 設置tableId

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

5. 調用 updateColumns 觸發 table-header、table-body 二次render更新,標記mounted完成

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

table-column

1. 生成column，併爲column綁定renderCell函數供table-body使用

   ``` 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 slot-scope="{row}"> //<span>{{row.frequentlyUsed | formatBoolean}}</span> //</template> } if (!renderCell) {// table-header不渲染index列的走這裏， /*<div className="cell">王小虎</div>*/ renderCell = DEFAULT_RENDER_CELL; } // <ElTableColumn // type="index" // width="50"/> return <div className="cell">{renderCell(createElement, data)}</div>; }; } ```

2. 給store.state._columns數組填充數據

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

table-store

table-store有兩個很重要的屬性_columns、data，_columns保存列的相關信息，data則保存開發者傳入的表格數據。還有兩個重要的函數insertColumn與updateColumns。

1. insertColumn爲_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 對_columns進行過濾獲得columns

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

table-header、table-body

table-header、table-body都擁有如下屬性

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

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

render(){
    // 渲染columns的數據
}

這兩個組件的工做原理是監聽columns數據變化以觸發render渲染。在table組件的mounted階段會調用 updateColumns 更新 columns，從而觸發 table-header、table-body 從新渲染。

另外table-body還會監聽data變化，觸發render。例如當組件加載後發送請求，待請求響應賦值data，從新渲染table-body。

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

參考

Element UI table官方文檔

來源：http://www.javashuo.com/article/p-eeohhjso-w.html