### ele-pro-table支持 a-table 的全部插槽，此外增加的插槽有：
| 名稱 | 說明 | 參數 |
| --- | --- | --- |
| toolbar | 表頭工具欄左側 | 無 |
```
<template>
<ele-pro-table :datasource="datasource" :columns="columns">
<!-- 表頭工具欄左側 -->
<template #toolbar>
<a-button type="primary">添加</a-button>
<a-button type="danger">刪除</a-button>
</template>
<!-- 表頭工具欄右側 -->
<template #toolkit>
<a-space size="middle">
<!-- 普通的按鈕 -->
<a-button type="primary">卷內文件調整</a-button>
<!-- 跟默認工具按鈕外觀一致的圖標按鈕 -->
<ele-tool-item title="我是按鈕" @click="alert('Hello')">
<plus-outlined />
</ele-tool-item>
</a-space>
</template>
</ele-pro-table>
</template>
<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue';
</script>
```
## **表格列自定義模板：**
### 像創建時間列如果要對時間進行格式化后顯示，使用 columns 的 customRender 參數即可：
```
<template>
<ele-pro-table :columns="columns"></ele-pro-table>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
// 表格列配置
const columns = ref<ColumnItem[]>([
{
title: '用戶賬號',
dataIndex: 'username'
},
{
title: '用戶名',
dataIndex: 'nickname'
}
]);
</script>
```
更復雜的列可以使用`bodyCell`插槽自定義，需要 AntDesignVue 的版本為 3.x ：
```
<template>
<ele-pro-table :columns="columns">
<template #bodyCell="{ column, record }">
<!-- 狀態列 -->
<template v-if="column.key === 'status'">
<a-switch
:checked="record.status === 0"
@change="(checked: boolean) => editStatus(checked, record)"
/>
</template>
<!-- 操作列 -->
<template v-else-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<a-popconfirm title="確定要刪除此用戶嗎？" @confirm="remove(record)">
<a class="ele-text-danger">刪除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import type { ColumnItem } from 'ele-admin-pro/es/ele-pro-table';
// 表格列配置
const columns = ref<ColumnItem[]>([
{
title: '用戶賬號',
dataIndex: 'username',
sorter: true
},
{
title: '狀態',
key: 'status',
dataIndex: 'status',
sorter: true
},
{
title: '操作',
key: 'action'
}
]);
</script>
```
a-table 還支持更多的插槽，比如自定義表頭、總結欄等，請到 AntDesignVue 的文檔查看。
