Vue slot插槽的使用，定义动态插槽

Vue slot插槽的使用，定义动态插槽

需求

封装vxetable,并对外提供自定义插槽，可以定义像edit一样固定名字的插槽，也可以定义和列名相同的动态插槽

代码

// 子级封装
<template #edit="{ row }">
    <slot name="edit" :row="row"></slot>
</template>
<template v-for="(item,index) in columns" #[item.dataIndex]="{ row }">
    <slot :name="item.dataIndex" :col="row"></slot>
</template>
// 父级调用
<template #departmentName="prop">
     <a @click="view(prop.col.name)">{{prop.col.name}}</a>
</template>
<template #edit="prop">
     <a @click="edit(prop.row)">编辑</a>
</template>

参考自

动态插槽