Element UI 源碼解讀之 Table 組件

很是感謝 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，理論上也是能夠使用的。

表格組件的屬性基本上用到了全部的屬性定義形式，好比：

1. 屬性的常規定義方法：propName: propType

stripe: Boolean複製代碼

1. 容許多種類型：propName: [propType1, propType2...]

height: [String, Number]複製代碼

1. 定義默認值爲基本數據類型：

fit: {
    type: Boolean,
    default: true
}複製代碼

1. 定義默認值爲對象，對象爲傳址引用，返回一個實例：

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，詳見示意圖。

參考資料：

• Element 官方文檔
• Element 項目源碼
• Element 非官方分析