從源碼看Element UI Table組件實現(xiàn)思路

moven_j 發(fā)布于2019-08-20 16:32 / 1300人閱讀

摘要：接下來來看一下是如何編寫一個組件的，在看源碼之前，首先還是要對他的組件的大致功能有一個了解，這樣我們在看源碼的時候才會知道這一段大概實現(xiàn)了什么功能。最后我實現(xiàn)的功能文檔以及最終的一個樣例

在你實現(xiàn)一個組件過程中，一定要注意一下幾點

將代碼模塊化并且分離。如果你將大量的邏輯或者是代碼都放在鉤子函數(shù)中（比如mounted），那么寫出來的組件代碼將非常丑陋，這樣子寫出的代碼也往往難以維護。

第二就是要注意可擴展性。因為定制一個基礎(chǔ)組件，也許當你日后還想對它的功能進行擴展的話，那么一定要注意自己代碼的編寫結(jié)構(gòu)。
接下來來看一下element ui是如何編寫一個table組件的，在看源碼之前，首先還是要對他的table組件的大致功能有一個了解，這樣我們在看源碼的時候才會知道這一段大概實現(xiàn)了什么功能。

點開table的src目錄下，有這么幾個文件

dropdown.js

filter-panel.vue（實現(xiàn)表格勾選的組件）

table-body.js （實現(xiàn)表格body的組件）

table-column.js （實現(xiàn)表中中每一列的組件）

table-footer.js （定義表格尾部的組件，會有一些合計的功能）

table-header.js（定義表格thead的文件）

table-layout.js （定義表格布局的文件）

table-store.js（定義事件的方法集中在這里）

table.vue（最終將上述組件整合后的一個最終table組件）

util.js（定義了一些工具函數(shù)）
對于這個結(jié)構(gòu)也就是像一開始提到的那樣，將代碼盡量拆分，這樣組織下來結(jié)構(gòu)清晰。分析的時候我將舉例每一種情況的代表，類似的照著實現(xiàn)就可以了。

首先是事件的實現(xiàn)

以row-click為例，我們使用這個事件的方式是@row-click=“dosomething”,那組件內(nèi)部如何觸發(fā)這個事件呢，最簡單的方法就是在每一次tr循環(huán)的時候都去綁定上一個@click事件就好，在這個事件里面去emit（‘row-click’）事件就好，可是這就是會有一個問題，事件一多，代碼都集中在methods中，會寫出非常長的代碼，這個時候就需要分離，我們新建一個store.js，用來管理各種事件。大致實現(xiàn)如下：

const TableStore = function (table,initialSatate) {
  this.table = table
  this.states = {}
}
TableStore.prototype.mutations = {
  handleRowClick () {
    this.table.emit("row-click")
  }
}
Table.prototype.commit = function (name,..agrs){
  mutations[name].apply(name,args)
}

我們在表格table創(chuàng)建一開始，在data (){}中就會創(chuàng)建一個新的tableStore對象，我們在每一行點擊的時候只用this.store.commit("handleRowClick");基于這個流程，如果以后還需要繼續(xù)添加事件，你就可以在mutations里面去定義。

layout.js也是一樣的道理，這里我只是對表格的高度去進行了設(shè)定，對于一個vue對象來說，不能用dom思路去實現(xiàn)它的高度，我是將vue對象打印出來，在一步一步尋找那個style屬性

TableColumn的實現(xiàn)

其實對于一個表格來說，他的表頭將會很重要。在螞蟻金服的那個antd組件庫中，他們對于表頭的定義是這樣的，你需要傳入一個columns（props），里面將你定義的每一列信息寫進去，而vue在實現(xiàn)的過程中，是將作為

組件children元素,在組件里再去定義每一列的屬性，基于這兩種實現(xiàn)方式的不同，我覺得很大程度上是因為vue中有一個標簽（也可能是別的原因），但是又有一個問題，就是在table-header/table-body/table-column中，他們都是用的render方法去渲染組件，我在參考他們官方編寫的過程中，用到了jsx語法的模式，不是很理解為什么又采用這種方式去編寫組件。
最后我實現(xiàn)的table功能文檔
以及最終的一個樣例demo