多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
### 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 的文档查看。