非常感謝 ElemeFE 團隊開發的 Element 元件庫，這套元件庫不但介面美觀而且程式碼優雅，十分值得借鑑。Table 是較為常用的元件之一，本文僅對 Table 結構做一個簡單的分析，具體實現可參考 Element 原始碼 ( V1.25 )。
表格結構
<div class="el-table">
<!--隱藏列-->
<div class="hidden-columns"></div>
<!--表頭部分-->
<div class="el-table__header-wrapper"></div>
<!--表格主體-->
<div class="el-table__body-wrapper"></div>
<!--左側固定列-->
<div class="el-table__fixed"></div>
<!--右側固定列-->
<div class="el-table__fixed-right"></div>
<!--右側固定列補丁-->
<div class="el-table__fixed-right-patch"></div>
<!--列寬調整代理-->
<div class="el-table__column-resize-proxy"></div>
</div>複製程式碼
隱藏列
- 容納 table 內容
表頭部分
// TableHeader作為獨立的子元件引入
import TableHeader from `./table-header`複製程式碼<div class="el-table__header-wrapper">
<table-header></table-header>
</div>複製程式碼表格主體
// TableBody作為獨立的子元件引入
import TableBody from `./table-body`複製程式碼<div class="el-table__body-wrapper">
<table-body></table-body>
<!--表格資料為空時，顯示佔位符-->
<div class="el-table__empty-block"></div>
</div>複製程式碼左側固定列
<div class="el-table__fixed">
<div class="el-table__fixed-header-wrapper"></div>
<div class="el-table__fixed-body-wrapper"></div>
</div>複製程式碼右側固定列
右側固定列的結構與左側相同
<div class="el-table__fixed-right">
<div class="el-table__fixed-header-wrapper"></div>
<div class="el-table__fixed-body-wrapper"></div>
</div>複製程式碼右側固定列補丁
- 預留滾動條的寬度
列寬調整代理
- 顯示調整表格尺寸的按鈕
表格功能
import 項
// 用於選擇列的多選按鈕
import ElCheckbox from `element-ui/packages/checkbox`
// 控制操作頻度的元件
import throttle from `throttle-debounce/throttle`
import debounce from `throttle-debounce/debounce`
// 新增或移除調整尺寸事件
import { addResizeListener, removeResizeListener } from `element-ui/src/utils/resize-event`
// 多語言支援
import Locale from `element-ui/src/mixins/locale`
// 表格狀態管理元件
import TableStore from `./table-store`
// 表格佈局管理元件
import TableLayout from `./table-layout`
// 表格主體元件
import TableBody from `./table-body`
// 表頭部分元件
import TableHeader from `./table-header`
// 處理滑鼠滾動事件
import { mousewheel } from `./util`複製程式碼屬性 props
官方文件描述的很詳盡，元件的屬性與文件基本一致，還有3個未公開的屬性：width、maxHeight、context，理論上也是可以使用的。
表格元件的屬性基本上用到了所有的屬性定義形式，比如：
- 屬性的常規定義方法：
propName: propType
stripe: Boolean複製程式碼- 允許多種型別：
propName: [propType1, propType2...]
height: [String, Number]複製程式碼- 定義預設值為基本資料型別：
fit: {
type: Boolean,
default: true
}複製程式碼- 定義預設值為物件，物件為傳址引用，返回一個例項：
data: {
type: Array,
default: function() {
return [];
}
}複製程式碼資料 data
主要包含狀態管理模組：store，佈局管理模組：layout
計算屬性 computed
// 返回表格主體部分
bodyWrapper()
// 能否自動更新表格高度，height 屬性為數值或具有固定列時可以
shouldUpdateHeight()
// 獲取行選擇集
selection()
// 獲取列物件集合
columns()
// 獲取表格資料
tableData()
// 獲取左側固定列集合
fixedColumns()
// 獲取右側固定列集合
rightFixedColumns()
// 計算表格高度
bodyHeight()
// 計算表格寬度
bodyWidth()
// 計算固定列表身高度
fixedBodyHeight()
// 計算固定列整體高度
fixedHeight()複製程式碼方法 methods
// 切換行的選擇狀態
toggleRowSelection(row, selected)
// 清除行的選擇集
clearSelection()
// 處理滑鼠離開某行的事件
handleMouseLeave()
// 更新垂直滾動條位置
updateScrollY()
// 繫結事件：處理滑鼠滾動及調整大小事件
bindEvents()
// 重新整理表格佈局
doLayout()複製程式碼觀察 watcher
// 更新高度
height
// 更新 RowKey
currentRowKey
// 更新資料
data
// 更新展開行 RowKey
expandRowKeys複製程式碼生命週期 lifecycle
分別設定了 created、mounted、destroyed，詳見示意圖。
參考資料：