ant-design-vue：a-table表格中插入自定义按钮

本文主要是介绍ant-design-vue：a-table表格中插入自定义按钮，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本文将介绍如何使用ant-design-vue在a-table表格中加入自定义按钮和图标的代码。

结果如下图所示，

在这里插入图片描述

一、简单示例

<template><a-table:columns="columns":data-source="data":row-selection="rowSelection":ellipsis="true"class="custom-table"><template #download="{ record }"><a-button type="primary" ghost>编辑</a-button></template></a-table>
</template>

columns 里面加上 slots: { customRender: 'download' }, download和上面 <template #download="{ record }">中的download保持一致。

const columns = [{title: '操作',dataIndex: 'operation',key: 'operation',width: '11%',ellipsis: true,slots: { customRender: 'download' },},];

二、复杂示例

<template><a-table:columns="columns":data-source="data":row-selection="rowSelection":ellipsis="true"class="custom-table"><template #video="{ record }"><a-button type="primary" ghost>视频</a-button></template><template #image="{ record }"><a-button type="primary" ghost>图片</a-button></template><template #operation="{ record }"><DownloadOutlined /><DeleteOutlined /></template></a-table>
</template>

columns 里面加上 slots: { customRender: 'video' }, video和上面 <template #video="{ record }">中的video保持一致。

columns 里面加上 slots: { customRender: 'image' }, image和上面 <template #image="{ record }">中的image保持一致。

columns 里面加上 slots: { customRender: 'operation' }, operation和上面 <template #operation="{ record }">中的operation保持一致。

  const columns = [{title: '视频',dataIndex: 'video',key: 'video',width: '11%',ellipsis: true,slots: { customRender: 'video' },},{title: '图片',dataIndex: 'image',key: 'image',width: '11%',ellipsis: true,slots: { customRender: 'image' },},{title: '操作',dataIndex: 'operation',key: 'operation',width: '11%',ellipsis: true,slots: { customRender: 'operation' },},];