vue項目封裝table組件思路整理

爲何須要封裝table組件？

後臺管理系統表格使用頻率高，減小關於table的業務代碼，且便於後期統一修改、便於後期維護。如給table內容展現，超出單元格以省略號展現等。

怎麼封裝table組件？

table組件具備的功能/特色有：

1. table列由父組件動態建立
2. table列類型包含：序列行、複選列、普通數據展現列、單元格根據父組件要求動態渲染列（如，操做列爲button，狀態列展現switch標籤等）
3. table分頁功能

怎樣實現table組件並完成功能/特色：

1. 選擇render函數仍是template實現組件：render函數沒法監聽組件自定義事件，且標籤層級不如template清晰，因此採用template封裝。

   注：render函數通常用於標籤層級少，偏重邏輯封裝的組件。如封裝input框等。template用於組件n次封裝，最後一層供用戶使用封裝，標籤結構清晰，邏輯處理少。

2. table列渲染：父組件傳遞列配置動態渲染列。包含實現序列和複選列的動態渲染，根據列配置的type決定。
3. 分頁功能實現：傳遞分頁配置，table組件判斷是否展現分頁，以及分頁的相關配置，如total等。

4. 動態渲染單元格——以element-ui爲例：

   1. 爲table-column.js組件接收renderCell自定義屬性
   2. 爲table-column.js組件column添加renderCell屬性。再table-column.js渲染單元格時調用的爲column.renderCell
   3. 引用table-column.js，用自定義table-column.js的el-table-column組件便可。
   4. 父組件傳遞給table-column.js的renderCell屬性，renderCell方法爲父組件動態渲染單元格內容