1.定义类型type和即将使用的插槽名称slotName
//content.config.ts项目配置文件中
{
type: 'custom',
label: '部门领导',
prop: 'leader',
width: '150px',
slotName: 'leader'
},
{
type: 'custom',
label: '上级部门',
prop: 'parentId',
width: '150px',
slotName: 'parent'
},
2.
动态绑定插槽名称,v-bind=“scope”把从store中获取pageList的每条数据绑定给插槽
:props是动态绑定配置文件的属性,age是我们直接在插槽上自定义的属性,都会被传到插槽的scope属性上,如最后使用时候的例子
PageContent.vue组件代码中
<div class="table">
<el-table :data="pageList" border style="width: 100%">
<template v-for="item in contentConfig.propsList" :key="item.prop">
<template v-else-if="item.type === 'custom'">
<el-table-column align="center" v-bind="item"> //正常渲染到这就可以了
<template #default="scope">
<slot
:name="item.slotName"
v-bind="scope"
:prop="item.prop"
age="18"
></slot>
</template>
</el-table-column>
</template>
</template>
</el-table>
</div>
scope.row[scope.prop]使用我们配置文件动态绑定的属性,scope.age是我们直接在插槽上定义的属性,scope.row.parentId则是我们scope从pageList中接收的数据,以上都在scope上
//在department.vue中使用子组件pageContent.vue
<PageContent
:content-config="contentConfig"
ref="contentRef"
@new-click="handleNewClick"
@edit-click="handleEditClick"
>
<template #leader="scope">
<span class="leader">哈哈哈:{{ scope.row[scope.prop] }}</span>
<span>{{ scope.age }}</span>
</template>
<template #parent="scope">{{ scope.row.parentId }}</template>
</PageContent>
效果如下: