摘要：本文章從如下圖所示的最基本的入手，分析組件源代碼。本人已經(jīng)對(duì)組件原來(lái)的源碼進(jìn)行削減，源碼點(diǎn)擊這里下載。還有兩個(gè)重要的函數(shù)與。在組件的階段會(huì)調(diào)用更新，從而觸發(fā)重新渲染。例如當(dāng)組件加載后發(fā)送請(qǐng)求，待請(qǐng)求響應(yīng)賦值，重新渲染。

本文章從如下圖所示的最基本的table入手，分析table組件源代碼。本人已經(jīng)對(duì)table組件原來(lái)的源碼進(jìn)行削減，源碼點(diǎn)擊這里下載。本文只對(duì)重要的代碼片段進(jìn)行講解，推薦下載代碼把項(xiàng)目運(yùn)行起來(lái)，跟著文章的思路閱讀。

table、table-header、table-body、table-column之間通過(guò)table-store進(jìn)行狀態(tài)管理。table-header、table-body對(duì)table-store數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)，每當(dāng)table改變table-store數(shù)據(jù)時(shí)觸發(fā)table-header、table-body重新渲染。

table-column為列數(shù)據(jù)column綁定相應(yīng)的renderCell函數(shù)，供table-body渲染時(shí)使用。table-column這個(gè)組件自身不做任何渲染。所以會(huì)看到模板將其隱藏。還有就是table-header、table-body通過(guò)render函數(shù)進(jìn)行渲染。

初始化store

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

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

將數(shù)據(jù)存儲(chǔ)到store，供table-body獲取data將其渲染

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

設(shè)置tableId

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

調(diào)用 updateColumns 觸發(fā) table-header、table-body 二次render更新,標(biāo)記mounted完成

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

生成column，并為column綁定renderCell函數(shù)供table-body使用

created(){
      // .........
      let column = getDefaultColumn(type, {
          id: this.columnId,
          columnKey: this.columnKey,
          label: this.label,
          property: this.prop || this.property,// 舊版element ui為property，現(xiàn)在的版本是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,
        });
      // .........
      
      // 提t(yī)able-body使用， table-body.js line 69
      column.renderCell = function (createElement, data) {
        if (_self.$scopedSlots.default) {
          renderCell = () => _self.$scopedSlots.default(data);
          //
        }
  
        if (!renderCell) {// table-header不渲染index列的走這里，
          /*
王小虎
*/
          renderCell = DEFAULT_RENDER_CELL;
        }
  
        //  
        return 
{renderCell(createElement, data)}
;
      };
  
}

給store.state._columns數(shù)組填充數(shù)據(jù)

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

table-store有兩個(gè)很重要的屬性_columns、data，_columns保存列的相關(guān)信息，data則保存開(kāi)發(fā)者傳入的表格數(shù)據(jù)。還有兩個(gè)重要的函數(shù)insertColumn與updateColumns。

insertColumn為_(kāi)columns填充數(shù)據(jù)

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

    // .....
  },
}

updateColumns 對(duì)_columns進(jìn)行過(guò)濾得到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都擁有以下屬性

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

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

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

這兩個(gè)組件的工作原理是監(jiān)聽(tīng)columns數(shù)據(jù)變化以觸發(fā)render渲染。在table組件的mounted階段會(huì)調(diào)用 updateColumns 更新 columns，從而觸發(fā) table-header、table-body 重新渲染。

另外table-body還會(huì)監(jiān)聽(tīng)data變化，觸發(fā)render。例如當(dāng)組件加載后發(fā)送請(qǐng)求，待請(qǐng)求響應(yīng)賦值data，重新渲染table-body。

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

Element UI table官方文檔