摘要:本文章從如下圖所示的最基本的入手,分析組件源代碼。本人已經對組件原來的源碼進行削減,源碼點擊這里下載。還有兩個重要的函數與。在組件的階段會調用更新,從而觸發重新渲染。例如當組件加載后發送請求,待請求響應賦值,重新渲染。
本文章從如下圖所示的最基本的table入手,分析table組件源代碼。本人已經對table組件原來的源碼進行削減,源碼點擊這里下載。本文只對重要的代碼片段進行講解,推薦下載代碼把項目運行起來,跟著文章的思路閱讀。
思路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
將數據存儲到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); // //{{row.frequentlyUsed | formatBoolean}} // } if (!renderCell) {// table-header不渲染index列的走這里, /*王小虎*/ renderCell = DEFAULT_RENDER_CELL; } //return {renderCell(createElement, data)}; }; }
給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; }, },參考
Element UI table官方文檔
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/108111.html
摘要:接下來來看一下是如何編寫一個組件的,在看源碼之前,首先還是要對他的組件的大致功能有一個了解,這樣我們在看源碼的時候才會知道這一段大概實現了什么功能。最后我實現的功能文檔以及最終的一個樣例 在你實現一個組件過程中,一定要注意一下幾點 將代碼模塊化并且分離。如果你將大量的邏輯或者是代碼都放在鉤子函數中(比如mounted),那么寫出來的組件代碼將非常丑陋,這樣子寫出的代碼也往往難以維護。...
摘要:近期給自己立了個小,讀源碼,每周至少讀篇源碼下面來談談和這兩個基于的框架源碼的基本結構以及區別。例如四兩個庫組件整體引入和按需引入整體引入兩個庫一樣的方法。 (近期給自己立了個小flag,讀源碼,每周至少讀1篇源碼) 下面來談談iview 和 Elemet UI 這兩個基于Vue 的UI 框架源碼的基本結構以及區別。 一、文件結構開發主要放在根文件夾下的src下: 1. ivew 文件...
摘要:近期給自己立了個小,讀源碼,每周至少讀篇源碼下面來談談和這兩個基于的框架源碼的基本結構以及區別。例如四兩個庫組件整體引入和按需引入整體引入兩個庫一樣的方法。 (近期給自己立了個小flag,讀源碼,每周至少讀1篇源碼) 下面來談談iview 和 Elemet UI 這兩個基于Vue 的UI 框架源碼的基本結構以及區別。 一、文件結構開發主要放在根文件夾下的src下: 1. ivew 文件...
摘要:社區的認可目前已經是相關最多的開源項目了,體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎篇)系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實戰篇)系類文章四:手摸手,帶你用vue擼后臺 系列...
閱讀 3027·2023-04-25 18:06
閱讀 3272·2021-11-22 09:34
閱讀 2857·2021-08-12 13:30
閱讀 2045·2019-08-30 15:44
閱讀 1660·2019-08-30 13:09
閱讀 1630·2019-08-30 12:45
閱讀 1715·2019-08-29 11:13
閱讀 3608·2019-08-28 17:51