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 非官方分析