vue3.0加ant design的table插槽用jsx语法
本人最近在做vue+ant design 3.0项目遇到了table插槽的问题在这里插入图片描述在这上面的#bodyCell和#expandedRowRender语法显然在jsx里面是不能使用的。废话不多说,直接上代码,本人也是翻了很久的资料才找到:用jsx语法写ant design插槽:<a-table columns={this.columns} dataSource={this.dat
·
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的时候就已经加了,只是我们没注意到而已。
辛苦的一天,写篇文章帮助和我一样的人。
更多推荐
已为社区贡献1条内容
所有评论(0)