本文将介绍如何使用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' },
    },
  ];