對ElementUItable組件的源碼的詳細分析

思路

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

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

 <p class="el-table__body-wrapper"
 ref="bodyWrapper">
 <table-body :context="context"
 :store="store"> 
 </table-body>
 </p>
 </p>
</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

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

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列的走這里，
    /*<p className="cell">王小虎</p>*/
    renderCell = DEFAULT_RENDER_CELL;
    }
    
    // <ElTableColumn
    // type="index"
    // width="50"/>
    return <p className="cell">{renderCell(createElement, data)}</p>;
    };
    
   }

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com