首頁 >web前端 >js教程 >Element UI table元件的來源碼的詳細分析

Element UI table元件的來源碼的詳細分析

不言
不言原創
2018-07-25 10:23:393988瀏覽

這篇文章從如下圖所示的最基本的table入手,分析table元件原始碼。本人已經對table組件原來的源碼進行削減。本文只對重要的程式碼片段講解,推薦下載程式碼把專案運行起來,跟著文章的思路閱讀。

想法

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

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

    <p>
      <table-body>                  
      </table-body>
    </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函數渲染。

初始化順序

Element UI table元件的來源碼的詳細分析

#table

  1. 初始化store

    data() {
      const store = new TableStore(this);
      return {
        store,
      };
    }
  2. 將store共用給table-header、table-body

        <p>
          <table-header></table-header>
        </p>
    
        <p>
          <table-body></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>
              //<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. #給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;
    },
  },
相關推薦:

React元件中綁定this的原因分析

Vue源碼中批次非同步更新與nextTick原理的解析

以上是Element UI table元件的來源碼的詳細分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn