vue+ant design 3.0的table插槽

最近在做ant design使用jsx封装table表格,没有想到有的语法相差甚远,自己走过的路含泪也要把这篇文章写下来:
看吧,这种插槽就是很独特。
如果你直接用vue3里面的

<template v-slot:name></template>

根本不起作用,
在这里插入图片描述
在这上面的#bodyCell和#expandedRowRender语法显然在jsx里面是不能使用的。
如图,语法都报错了~
在这里插入图片描述
废话不多说,直接上代码,本人也是翻了很久的资料才找到:
用jsx语法写ant design插槽:

 <a-table columns={this.columns} dataSource={this.dataSource} pagination={false} 
        v-slots={ {expandedRowRender:()=><div>哈哈哈哈</div>} }>
</a-table>

这个特性在其实vue2.6的时候就已经加了,只是我们没注意到而已。
辛苦的一天,写篇文章帮助和我一样的人。

Logo

前往低代码交流专区

更多推荐