Antd customRender return raw html

Question

I need to generate html code in a customRender function of one column.

I cannot use scopedSlots as suggested here, since the html code is part of e generic component, and other components pass their columns array as a parameter.

BaseComponent.vue:

<template>
    <a-table
        :columns="attrs.columns"
        :rowKey="record => record[attrs.recordId]"
        :dataSource="filteredTableData"
    >
    </a-table>
</template>

<script>
    export default {
        props: {
            attrs: {
                type: Object,
                required: true
            }
     :
</script>

ContactComponent.vue:

<template>
      :
    <base-component :attrs="attrs"/>
      :
</template>

<script>
    import BaseComponent from './BaseComponent';
    export default {
        components: {
            BaseComponent
        },

        data() {
            return {
                attrs: {
                    columns: [
                        title: 'Type',
                        dataIndex: 'type',
                        customRender: (val, record) => {
                            return '<div class="myClass">' + val + </div>';
                        },

                    ],
                    recordId: 'contactId'

                }
            }
        }
     :
</script>

The problem:
The following code:

customRender: (val, record) => {
    return '<div class="myClass">' + val + '</div>';
},

renders this:

Is there a way to force raw html rendering directly from the customRender function?

Answer 1

You can transform your code:

customRender: (val, record) => {
    return '<div class="myClass">' + val + '</div>';
},

In this way (if you have JSX support).

customRender: (data) => {
    return <div class="myClass"> {data.text} </div>;
},

If you dont have JSX support, you can return a Vnode. Like specified here: https://vuejs.org/guide/extras/render-function.html#creating-vnodes (I didn't try this way).

Or you can try to add support for JSX: https://vuejs.org/guide/extras/render-function.html#jsx-tsx

(My reply is late but may help others.)

==========

Edit:

Here, another exemple, to show you where this piece of code should be (only work with JSX support):

data: function () {
    return {
        dataSource: [],
        columns: [
            {
                title: 'Website',
                dataIndex: "cat_website",
                key: "cat_website",
                customRender: (data) => {
                    return <a href={'http://' + data.text} target='_blank'>{data.text}</a>;
                },
            },
            // other columns...
        ],
        // ...
    }
}