使用jsx如何自定义<el-table-column>组件里的内容

Question

最近做了一个业务需求，在一个列表里有很多列需要自定义内容，为了方便日后维护，希望用jsx渲染出这个列表。
遇到了一个问题，在自定义el-table-column时无法将自定义内容渲染出来·
上代码：

render(h, context) {

    return (
        <section>
            {this.renderTable()}
        </section>)
    
},

methods: {
    renderTable() {
        return (
            <el-table 
                ref="table" 
                stripe 
                data={ this.tableData } 
                class="total-table"> 
                {
                    this.columnSet.map(item => this.renderTableColumn(h, item))
                }
            </el-table>)
    },

    renderTableColumn(h, options) {
        let headerContent;
        if (options.ifThTooltip) {
            headerContent = <span slot="header" slot-scope="{ column, $index}" class={options.ifDetail ? 'total-table-label' : ''} onClick={() => options.ifDetail ? this.openDialog() : false}>
                <el-tooltip effect="dark" content={options.thTooltipContent} placement="top">
                    <span>{options.label}<i class="el-icon-question"></i></span>
                </el-tooltip>
            </span>
        }

        const slotScope = {
            scopedSlots: {
                default(scope) {
                    renderCell(scope)
                },
            },
        };

        const renderCell = (scope) => {
            console.log(scope.row[options.prop]);
            return 
                options.ifTdTooltip ?
                    <p>
                        <el-tooltip effect="dark" popper-class="order-type-tooltip" content={options.tdTooltipContent} placement="top">
                            <span>{scope.row[options.prop]}{options.ifRate ? '%' : ''}</span>
                        </el-tooltip>
                    </p> :
                    <p>
                        <span>{scope.row[options.prop]}{options.ifRate ? '%' : ''}</span>
                    </p>
        }

        console.log(slotScope);

        return (
            <el-table-column prop={options.prop} label={options.label} key={options.key} {...slotScope}>
                { headerContent }
            </el-table-column>
        )
    },

    openDialog() {
        alert(1)
    }
}

打印出的slotScope内容如下：

可以看出来已经能关联到表头的相关属性了
而打印出的 scope.row[options.prop]的值也是正确的

这个是页面的展示效果：

可以看出来并没有渲染出预期的值，但是表头的自定义内容是没问题的

求大神指点下，如何将自定义的slotScope内容正确的渲染到列表的.cell里面

Answer 1

自己日常开发封装的表格组件，支持element table的所有功能，有需要可以拿去使用：https://github.com/liub1934/l...

Answer 2

jsx在vue里用就比较麻烦了，一般vue的函数式组件都不建议写太多渲染，要是这样写直接可以用react了。刚好前段时间写了个vue-element-table的表格组件的博客，公司项目提炼出来的，十分强大。自定义的话添加format就好了。可以参考一下。
https://blog.csdn.net/qq_3995...

Answer 3

https://xuliangzhan_admin.git...

Answer 4

问题解决了，是因为获取不到$slotScope里的default值，return一下就好了。
先把这个问题留着，看下其他大神的解决思路

Answer 5

发现有个formatter方法也可以