ホームページ > 記事 > ウェブフロントエンド > Element UIテーブルコンポーネントのソースコードの詳細な分析
この記事では、以下の図に示すような最も基本的なテーブルから始めて、テーブル コンポーネントのソース コードを分析します。テーブルコンポーネントの元のソースコードを削除しました。この記事では、重要なコード スニペットのみを説明します。プロジェクトを実行するコードをダウンロードして、記事と合わせて読むことをお勧めします。
<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-header と table-body をトリガーして再レンダリングします。
table-column は、テーブル本体をレンダリングするときに使用するために、対応する renderCell 関数を列データ列にバインドします。テーブル列コンポーネント自体はレンダリングを行いません。したがって、テンプレートがそれを隠していることがわかります。 render 関数を通じてレンダリングされる table-header と table-body もあります。
ストアを初期化
data() { const store = new TableStore(this); return { store, }; }
table-header、table-bodyにストアを共有
<p> <table-header></table-header> </p> <p> <table-body></table-body> </p>
watch: { data: { immediate: true, handler(value) { // 供 table-body computed.data 使用 this.store.commit('setData', value); // ...... } }, },
created() { //..... this.tableId = `el-table_${tableIdSeed}`; //..... }
mounted() { // ..... this.store.updateColumns(); // ..... this.$ready = true; }
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>; }; }
renderCell函数
mounted() { // ...... owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null); }
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); } // ..... }, }
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); // .... }
これら 2 つのコンポーネントの動作原理は、列データの変更を監視してレンダリングをトリガーすることです。テーブル コンポーネントのマウント段階では、updateColumns が呼び出されて列が更新され、それによって table-header と table-body の再レンダリングがトリガーされます。
さらに、table-body はデータの変更を監視し、レンダリングをトリガーします。たとえば、コンポーネントがロードされると、リクエストが送信され、リクエストの応答にデータが割り当てられ、テーブル本体が再レンダリングされます。
props: { store: { required: true }, } computed: { columns() { return this.store.states.columns; }, }, render(){ // 渲染columns的数据 }
関連する推奨事項:
React コンポーネントでこれをバインドする理由の分析Vue ソース コードのバッチ非同期更新と nextTick 原則の分析
以上がElement UIテーブルコンポーネントのソースコードの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。