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

最近做了一个业务需求,在一个列表里有很多列需要自定义内容,为了方便日后维护,希望用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]的值也是正确的

这个是页面的展示效果:
clipboard.png
可以看出来并没有渲染出预期的值,但是表头的自定义内容是没问题的

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

回答:

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

回答:

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

回答:

https://xuliangzhan_admin.git…

回答:

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

回答:

发现有个formatter方法也可以

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注