ant-design-vue中table自定義列
阿新 • • 發佈：2021-03-05
#### 1. 使用背景
在專案中使用`ant-vue`的`a-table`控制元件過程中，需要顯示序號列或者在列中顯示圖片，超鏈，按鈕等UI資訊。經過查詢文件`customCell`和`customRender`可以實現以上需求，比如實現如下表格資料渲染
#### 2. slots&scopedSlots作用
在檢視文件過程中，在型別一欄中經常看到 `xxx|slot |slot-scope` 這樣的描述資訊。比如`customRender`在文件中的描述資訊
```text
customRender | 生成複雜資料的渲染函式.. | **Function(text, record, index) {}|slot-scope**
```
在最初一直以為在列中可以是如下配置的
```javascript
// 公眾號:小院不小 date 20210205 wx:464884492
const tableColumn = [
{
title: '遊戲名稱',
dataIndex: 'title',
customRender:'xxslot'
}
]
```
這樣定義後執行`npm run serve`在瀏覽器會出現`customRender is not function` 的錯誤資訊。以及後來看到有如下寫法
```javascript
// 公眾號:小院不小 date 20210205 wx:464884492
const tableColumn = [
{
title: '遊戲名稱',
dataIndex: 'title',
scopedSlots: {
customRender: "customRender"
}
}
]
```
還有很長一段時間不明白`scopedSlots`這個物件的屬性為啥是`customRender`, 還有其他的什麼屬性嗎？當時知識還不完善沒有理解到文件上`使用 columns 時，可以通過該屬性配置支援 slot-scope 的屬性`的含義
雖然知道怎麼用了，但還是有必要了解下它是如何執行的。我們知道在vue中可以通過`this.$slots`、`this.$scopedSlots`分別訪問靜態插槽和作用域插槽。在檔案`components\table\index.jsx`中可以找到元件庫對`scopedSlots`、`slots`轉換成具體函式的過程，程式碼如下
```javascript
// 公眾號:小院不小 date 20210205 wx:464884492
...
// 獲取插槽
const { $slots, $scopedSlots } = this;
// 轉換靜態插槽
Object.keys(slots).forEach(key => {
const name = slots[key];
if (column[key] === undefined && $slots[name]) {
column[key] = $slots[name].length === 1 ? $slots[name][0] : $slots[name];
}
});
// 轉換動態插槽
Object.keys(scopedSlots).forEach(key => {
const name = scopedSlots[key];
if (column[key] === undefined && $scopedSlots[name]) {
column[key] = $scopedSlots[name];
}
});
```
從以上程式碼也可以知道，如果您定義如下的列配置，自定插槽會失效,以下程式碼該列會全部顯示123
```javascript
// 公眾號:小院不小 date 20210205 wx:464884492
{
title: "customRender|slot-scope",
dataIndex: '',
customRender: () => 123,
scopedSlots: {
customRender: "customRender"
}
}
```
也就是說customRender定義成函式的優先順序高於作用域插槽
#### 3. customCell
`customCell`影響的是`vnode`中的屬性資訊，你可以改變當前列的樣式等相關資訊，在檔案 `components\vc-table\src\TableCell.jsx` 對應程式碼片段
```javascript
// 公眾號:小院不小 date 20210205 wx:464884492
...
if (column.customCell) {
tdProps = mergeProps(tdProps, column.customCell(record, index));
}
...
return (
{indentText}
{expandIcon}
{text}