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

思路

<template><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

初始化store

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

將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>

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

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

設置tableId

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

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

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

table-column

生成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，現在的版本是proptype, // selection、index、expandrenderCell: null,renderHeader: this.renderHeader, // 提供給table-column， table-column.js line 112width,formatter: this.formatter,context: this.context,index: this.index,});// .........// 提table-body使用， table-body.js line 69column.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>;};}

給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。

insertColumn為_columns填充數據

TableStore.prototype.mutations = {insertColumn(states, column, index, parent) {let array = states._columns;// ......if (typeof index !== 'undefined') {// 在index的位置插入columnarray.splice(index, 0, column);} else {array.push(column);}// .....}, }

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 中存儲 datareturn this.store.states.data;},},

參考

Element UI table官方文檔

總結

以上是生活随笔為你收集整理的Element UI table组件源码分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。