Detailed analysis of the source code of the Element UI table component

This article starts with the most basic table as shown in the figure below and analyzes the table component source code. I have cut down the original source code of the table component. This article only explains the important code snippets. It is recommended to download the code to run the project and read along with the article.

Ideas

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

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

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

State management between table, table-header, table-body and table-column is done through table-store. table-header and table-body monitor table-store data, and trigger table-header and table-body to re-render whenever the table changes table-store data.

table-column binds the corresponding renderCell function to the column data column for use when rendering the table-body. The table-column component itself does not do any rendering. So you'll see that the template hides it. There is also table-header and table-body that are rendered through the render function.

Initialization sequence

##table

1. Initialize store

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

2. Share the store to table-header and table-body

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

3. Store data to the store for table-body gets data and renders it

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

4. Set tableId

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

5. Call updateColumns to trigger table-header and table-body secondary render updates , mark mounted completed

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

Generate column and bind column
1. renderCell Function

   For table-body use<pre class="brush:php;toolbar:false">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 = () =&gt; _self.$scopedSlots.default(data);           //&lt;template&gt;           //&lt;span&gt;{{row.frequentlyUsed | formatBoolean}}&lt;/span&gt;           //&lt;/template&gt;         }            if (!renderCell) {// table-header不渲染index列的走这里，           /*&lt;p&gt;王小虎&lt;/p&gt;*/           renderCell = DEFAULT_RENDER_CELL;         }            //  &lt;eltablecolumn&gt;&lt;/eltablecolumn&gt;         return &lt;p&gt;{renderCell(createElement, data)}&lt;/p&gt;;       };    }</pre>

Fill the store.state._columns array with data

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

table-store has two very important attributes _columns and data. _columns saves the relevant information of the columns, and data saves the table data passed in by the developer. There are also two important functions insertColumn and updateColumns.

insertColumn fills data for _columns

1. 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 filters _columns to get columns

2. 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 all have the following attributes

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

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

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

The working principle of these two components is to monitor column data Change to trigger render. In the mounted phase of the table component, updateColumns will be called to update the columns, thereby triggering table-header and table-body to be re-rendered.

In addition, table-body will also monitor data changes and trigger render. For example, when the component is loaded, a request is sent, data is assigned to the request response, and the table-body is re-rendered.

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

Related recommendations:

Analysis of batch asynchronous updates and nextTick principles in Vue source code

The above is the detailed content of Detailed analysis of the source code of the Element UI table component. For more information, please follow other related articles on the PHP Chinese website!