vue 插槽的嵌套
插槽只能在根节点,如果封装一个组件a,这个组件里使用到了另一个组件b,组件b中也有插槽。组件a想在插槽中预留b的插槽(如再次封装antdv的table组件,table本身有插槽,此时你想在自己封装的myTable中预留一个插槽用于放入table的插槽)这个时候会报错,提示插槽只能在根节点中。解决方法如下:
<!-- 表格区域 --> <!-- :scopedSlots="{ $scopedSlots }", 这样在使用组件的外部直接写slot就可以正常渲染 --> <a-table ref="TableInfo" bordered :columns="propData.tableColumns" :rowKey="(record,index) => { return record.id || index }" :dataSource="dataSource" :pagination="pagination" :loading="loading" :scopedSlots="{ $scopedSlots }" @change="handleTableChange"> <template v-for="(index, name) in $scopedSlots" v-slot:[name]="text, record"> <slot :name="name" v-bind="{text, record}"></slot> </template> </a-table>
使用自定义组件,假设表格的columns的一列预留了enable的具名插槽:
<BasicQuery ref="basic">
<!-- 表格内的插槽 -->
<template v-slot:enable="{text, record}">
<a-switch :checked="text" checked-children="开" un-checked-children="关" @change="changeStatus($event, record)" />
</template>
</BasicQuery>