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

_乐多_

已于 2024-09-03 13:05:41 修改

阅读量670

点赞数 8

分类专栏： Vue adv 文章标签： vue.js javascript ecmascript

于 2024-08-30 18:36:22 首次发布

本文链接：https://blog.csdn.net/yyyyyyyyyyy_9/article/details/141724605

版权

Vue 同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

adv

3 篇文章 0 订阅

订阅专栏

本文将介绍如何使用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保持一致。


<script lang="ts" setup>

  import { Table as ATable, Tag as ATag } from 'ant-design-vue';
  import {
    PictureOutlined,
    DownloadOutlined,
    DeleteOutlined,
    PlayCircleOutlined,
  } from '@ant-design/icons-vue';

  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' },
    },
  ];

</script>