這篇文章從如下圖所示的最基本的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函數渲染。
初始化順序
#table
-
初始化store
data() {
const store = new TableStore(this);
return {
store,
};
}登入後複製
-
將store共用給table-header、table-body
<p>
<table-header></table-header>
</p>
<p>
<table-body></table-body>
</p>
登入後複製
-
將資料儲存到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，现在的版本是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>;
};
}登入後複製
- #給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的位置插入column
array.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 中存储 data
return this.store.states.data;
},
},登入後複製
相關推薦：
React元件中綁定this的原因分析
Vue源碼中批次非同步更新與nextTick原理的解析
以上是Element UI table元件的來源碼的詳細分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
