vue3 封裝仿antd-vue的Table組件基本實現

最近需要在不使用UI框架的情況下封裝一個簡單的表格，由於對antd-vue比較熟悉，所以仿照了antd-vue的樣子寫了個簡化版的Table組件。

組件源碼見另一篇博客，

用到的技術棧：VUE3、SCSS

用過antd-vue的都應該知道table組件主要的傳參是兩個：columns和dataSource，分別對應表頭信息和表格的數據信息。

1.表頭數據columns

表頭的傳參數據結構如下：

[
  { label: '姓名', key: 'name' },
  { label: '年齡', key: 'age' }
]

• key：必須，用來標志當前行
• label：非必須，當前列的列頭顯示內容

子組件-表頭的遍歷：

 這部分代碼基本都能看懂，簡單的v-for遍歷。

2.表格數據dataSource

表格數據傳參的數據結構如下：

[
  {name: '張三', age: 24},
  {name: '李四', age: 45}   
]

可以看到dataSource里面的key都是columns里面的key字段對應的值

對應源代碼如下：

 主要思路是先遍歷每一行的數據，再在每一行的數據中根據columns遍歷當前列的數據

做到這里不加66行的代碼的話，整個表格顯示功能就已經實現了。

但是如果當前行有操作（編輯/刪除）的話，就需要使用插槽來實現了。

 3.當前行的操作功能

其實整個功能做起來比較簡單，現在回想起來，還是自己對vue3的slot使用不太熟悉。

slot的基本使用見官網

這里能實現這個功能主要看的是作用域插槽的部分

代碼還是看上面那張圖的65、66兩行。

但是columns的傳參需要有變化：

[
  { label: '姓名', key: 'name' },
  { label: '年齡', key: 'age' },
  { label: '操作', key: 'operate', slots: 'operate'}   
]

 slots參數表示當前列需要使用插槽

父組件使用table組件：

<template #operate="record">
     <a @click="handleOperate(record.rowData)">詳情</a>
</template>

注意：

• #operate是v-slot的簡化寫法
• record是子組件內的slot插槽傳過來的參數
• rowData與Table組件的:rowData對應，即當前tr的內容

接下來貼上使用代碼：

 可以看到使用基本和antd-vue差別不大了

4.其他功能

目前已經實現了表頭固定table可滾動、寬度等基本功能、如果需要添加其他功能的話可以在此基礎上添加各種傳參即可