如何使用 Antd 和 VueJS 在表格单元格中使用 customRender [英] How to use customRender in a table cell with Antd and VueJS
问题描述
我在我的应用中使用了 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
