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

问题描述

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

我的列数组如下所示:

列:[{ title: '设计',dataIndex: 'designImage.fileUrl',customRender() {//h 将被注入返回 '​​
bar</div>'}},]

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

我也试过这种方式:

{ title: '设计',dataIndex: 'designImage.fileUrl',customRender: (文本、记录、索引) =>{返回 {儿童:''}}},

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

有人可以帮我弄清楚我做错了什么吗?

解决方案

您可以利用列中的 scopedSlots 属性，并使用它来定义 customRender 属性.

这是一个例子:

const columns = [{标题:图像"，数据索引:图像"，键:图像"，scopedSlots: { customRender: "image-column";},},];

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

<模板槽=图像列"slot-scope=图像"><img :src=图像"/><!-- 在此处添加您的自定义元素--></a-table>

这是一个组件示例:

<a-table :columns="columns";:data-source="tableData"><模板槽=图像列"slot-scope=图像"><img :src=图像"/></a-table><脚本>常量列 = [{标题:图像"，数据索引:图像"，键:图像"，scopedSlots: { customRender: "image-column";},},];常量表数据 = [{图片:https://picsum.photos/200"，},{图片:https://picsum.photos/200"，},];导出默认{数据() {返回 {列，表数据，};},};

I'm using antd in my app and I'm trying to do a customRender to show an image in a cell.

My columns array looks like this:

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

So, as you might imagine, it turns out like this:

I also tried this way:

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

Unfortunately, that ended up like this:

Can someone please help me figure out what I'm doing wrong?

解决方案

You can take advantage of the scopedSlots property within columns, and use it to define a scoped slot for the customRender property.

Here is an example:

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

Now, in your template, you can use the image-column named slot, like this:

<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>

And here is a component example:

<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>

这篇关于如何使用 Antd 和 VueJS 在表格单元格中使用 customRender的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！