ant table vue3插槽用法
时间: 2023-07-17 21:05:05 浏览: 61
在 Ant Design Vue 3 中,使用插槽(Slots)来自定义 Ant Design 表格(Table)的内容是非常常见的。下面是一个示例的代码,展示了如何使用插槽来自定义表格的内容:
```vue
<template>
<a-table :columns="columns">
<!-- 自定义表头 -->
<template #title>
<span>自定义表头</span>
</template>
<!-- 自定义表格项 -->
<template #default="{ text }">
<a :href="text">{{ text }}</a>
</template>
<!-- 自定义表格底部 -->
<template #footer>
<span>自定义表格底部</span>
</template>
</a-table>
</template>
<script>
import { defineComponent } from 'vue';
import { Table, A } from 'ant-design-vue';
export default defineComponent({
components: {
ATable: Table,
A,
},
data() {
return {
columns: [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '操作',
key: 'action',
slots: { customRender: 'action' },
},
],
data: [
{
key: '1',
name: 'John Brown',
age: 32,
action: 'https://example.com',
},
{
key: '2',
name: 'Jim Green