如何通过 Antd 和 VueJS 在表格单元格中使用 customRender

Question

我在我的应用程序中使用 antd，我正在尝试执行 customRender 以在单元格中显示图像。

我的列数组如下所示：

columns: [
        { title: 'Design',
          dataIndex: 'designImage.fileUrl',
          customRender () { // h will be injected
            return '<div id="foo">bar</div>'
          }
        },
]

所以，正如你想象的那样，结果是这样的：

我也尝试过这个方法：

{ title: 'Design',
          dataIndex: 'designImage.fileUrl',
          customRender: (text, record, index) => {
            return {
              children: '<img src="https://via.placeholder.com/300.png/09f/fff">'
            }
          }
        },

不幸的是，结果是这样的：

有人可以帮我找出我做错了什么吗？

Answer 1

您可以利用列中的 scopedSlots 属性，并使用它为 customRender 属性定义作用域槽。

这是一个例子：

const columns = [
  {
    title: "Image",
    dataIndex: "image",
    key: "image",
    scopedSlots: { customRender: "image-column" },
  },
];

现在，在您的模板中，您可以使用 image-column 命名槽，如下所示：

<a-table :columns="columns" :data-source="tableData">
    <template slot="image-column" slot-scope="image">
        <img :src="image" /> <!-- Add your custom elements here -->
    </template>
</a-table>

这是一个组件示例：

<template>
  <a-table :columns="columns" :data-source="tableData">
    <template slot="image-column" slot-scope="image">
      <img :src="image" />
    </template>
  </a-table>
</template>

<script>
const columns = [
  {
    title: "Image",
    dataIndex: "image",
    key: "image",
    scopedSlots: { customRender: "image-column" },
  },
];

const tableData = [
  {
    image: "https://picsum.photos/200",
  },
  {
    image: "https://picsum.photos/200",
  },
];

export default {
  data() {
    return {
      columns,
      tableData,
    };
  },
};
</script>

Answer 2

当你使用antd的Table时，customRender应该返回一个vnode而不是字符串，所以你可以这样尝试

columns: [
        { title: 'Design',
          dataIndex: 'designImage.fileUrl',
          customRender () { 
            return <div id="foo">bar</div>
          }
        }
]

Answer 3

正如Troubledot所写，它有效，我想补充一点，你需要使用jsx

Nuxt 3 上的示例

<script setup lang="jsx">

const = columns [{ 
          title: 'Design',
          dataIndex: 'designImage.fileUrl',
          customRender () { 
            return <div id="foo">bar</div>
          }
        }]

</script>