0

我需要在customRender一列的函数中生成 html 代码。

不能按照这里scopedSlots的建议使用,因为 html 代码是通用组件的一部分,而其他组件将它们的列数组作为参数传递。

基础组件.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>

联系组件.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>

问题:
以下代码:

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

呈现这个:
在此处输入图像描述

有没有办法直接从customRender函数强制原始 html 渲染?

4

0 回答 0