当我们使用a-table时,自带的功能往往不能满足我们的需求,这时就需要到了slots插槽的使用
插槽允许我们自己创建一个<template>然后在里面写代码,去自拟定自己需要的内容
例子:
<template>
<a-table :columns="columns" :data-source="data">
<template #action="{ record }">
<span>
<a>Invite 一 {{ record.name }}</a>
<a-divider type="vertical" />
<a>Delete</a>
<a-divider type="vertical" />
<a class="ant-dropdown-link">
More actions
<down-outlined />
</a>
</span>
</template>
</a-table>
</template>
<script lang="ts" setup>
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Action',
key: 'action',
slots: { customRender: 'action' }
},
];
const data = [
{
name: 'John Brown',
},
{
name: 'Jim Green',
},
{
name: 'Joe Black',
},
];
</script>
只需要配置columns时配置slots: { customRender: '插槽名' },再在a-table组件中写
<template #插槽名>,就可以在该标签内自拟定了