Antd vue table表格二次嵌套slot插槽不显示问题

分类:技术来源:bobo最近更新:2020-09-19浏览:3486

在使用antd-vue版的table表格二次嵌套自定义组件时,原以为用<slot />插槽的方式就可以引入父级的所有子元素,结果根本不显示。

解决思路

按照 Ant Design Vue 开发文档把插槽slot包裹起来,核心代码如下:


~~~~

~~~~

computed: {
//筛选出表头元素插槽数组
headSlotColumns() {
return this.$attrs.columns
.filter(item => {
return item.slots;
})
.map(item => item.slots);
},
//筛选出表行元素内容插槽数组
rowSlotColumns() {
return this.$attrs.columns
.filter(item => {
return item.scopedSlots;
})
.map(item => item.scopedSlots);
},
}