### 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 的文档查看。
