在antd Vue 表格中轻松嵌入图片和按钮

2023-11-06 17:26:16

在日常开发中，我们经常需要在表格中展示图片或添加按钮进行操作。antd Vue 作为一款功能强大的表格组件库，提供了灵活的自定义功能，允许我们轻松实现这一需求。接下来，我将详细介绍如何使用 scopedSlots 和 customRender 属性在 antd Vue 表格中嵌入图片和按钮。

步骤一：准备工作

导入 antd Vue 库：

import { Table } from 'ant-design-vue';

在模板中创建表格组件：

<template>
  <Table :columns="columns" :data-source="dataSource" />
</template>

步骤二：添加 scopedSlots 和 customRender 属性

接下来，我们需要使用 scopedSlots 和 customRender 属性来定义渲染函数，以便在表格中插入图片和按钮。

<Table
  :columns="columns"
  :data-source="dataSource"
  scopedSlots={{
    customRender: 'action'
  }}
/>

步骤三：定义渲染函数

在渲染函数中，我们可以使用 h 函数来创建图片和按钮元素，并通过 Vue 的 v-bind 属性绑定数据：

export default {
  methods: {
    renderAction(h, params) {
      return h('div', [
        h('a', {
          attrs: {
            href: params.row.url,
            target: '_blank'
          }
        }, [
          h('img', {
            attrs: {
              src: params.row.image
            }
          })
        ]),
        h('Button', {
          props: {
            type: 'primary',
            size: 'small'
          },
          on: {
            click: () => {
              console.log('Button clicked!');
            }
          }
        }, '点击')
      ]);
    }
  }
};

在这个渲染函数中，我们创建了一个 div 元素，并在其中嵌入了图片和按钮。图片的路径通过 v-bind 从 params.row.image 中获取，按钮的点击事件也通过 v-on 进行绑定。

步骤四：定义表格列

最后，我们需要定义表格的列，并在其中指定 customRender 属性，以便使用我们定义的渲染函数：

export default {
  data() {
    return {
      columns: [
        {
          title: '图片',
          scopedSlots: {
            customRender: 'action'
          }
        },
        {
          title: '按钮',
          scopedSlots: {
            customRender: 'action'
          }
        }
      ]
    };
  }
};

现在，当您渲染表格时，您应该可以看到图片和按钮已经成功嵌入其中。