antd vue里面 a-table再次封装,slot-scope如何跨组件传递?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了antd vue里面 a-table再次封装,slot-scope如何跨组件传递?相关的知识,希望对你有一定的参考价值。

现在想把一个表格二次封装,但是table里面scopedSlots不知道怎么从父到子再到孙,这个时候孙组件就是a-table
相关代码
<!--b.vue-->

<a-table ref="table" bordered
size="middle"
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="selectedRowKeys: selectedRowKeys, onChange: onSelectChange"
@change="handleTableChange"
>
<span slot="action" slot-scope="text, record">
<a @click="handleById(record)">编辑</a>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</span>

</a-table>
<!-- a.vue -->

<b :columns="columns">
<!--这段怎么传到a-table里面?? -->
//<span slot="action" slot-scope="text, record">
//<a @click="handleById(record)">编辑</a>
//<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
// <a>删除</a>
// </a-popconfirm>
// </span>

b.vue里面的<a-table> 里面的插槽代码想从a.vue里面用的b组件传入,要如何写

vue-bus 可以实现

 //安装: npm install vue-bus
//在main.js 中引入vuebus:
 import Vue from 'vue';import VueBus from 'vue-bus'; Vue.use(VueBus);   
 
//在组件中使用 
//触发事件:
this.$bus.emit("onslected",params)
//应对事件:
mounted:function()
this.$bus.on("onslected",function()

);
,
destroyed:function()
this.$bus.off("onslected");

 请采纳

参考技术A 同问,解决了吗?怎么传

以上是关于antd vue里面 a-table再次封装,slot-scope如何跨组件传递?的主要内容,如果未能解决你的问题,请参考以下文章

antd-vue table合并单元格

antd+vue table表格 是否启用 状态显示

antd-design实例详解a-table 中column中slot-scope=“{text, record, index}

antd-design实例详解a-table 中column中slot-scope=“{text, record, index}

antd-design实例详解a-table 中column中slot-scope=“{text, record, index}

Vue中图片上传组件封装-antd的a-upload二次封装-案例