Vue3 IviewUI Table组件封装 Slot穿透问题

开发环境介绍

node -v
v14.18.3

npm -v
6.14.15

vue -V      
@vue/cli 5.0.8

//package.json 部分代码
dependencies{
    "view-ui-plus": "^1.3.1",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
}

封装代码

自定义组件: ModulesTable

<!-- 自定义插件 -->
<template>
    <Table border :columns="columns" :data="rows">
        <template v-for="(item) in columns" #[item.slot]="param" >
            <slot :name="item.slot" v-bind="param"></slot>
        </template>
    </Table>
</template>

export default {
    name: 'ModulesTable',
    props: {
        columns: {
            type: Array,
            require: true
        },
        rows: {
            type: Array,
            require: true
        }
    }
}

调用实例: Demo.vue

<!-- 自定义插件 -->
<template>
    <ModulesTable :columns="columns" :data="rows">
        <template #name="{ row }">
            <a>{{ row.name }}</a>
        </template>
    </Table>
</template>

export default {
    name: 'ModulesTable',
    data(){
        return {
            columns:[
                {key: "id", title:"id"},
                {slot: "name", title:"名称"},
            ],
            rows: [
                {id:1,name:"lq"}
            ]
        }
    }
    props: {
        columns: {
            type: Array,
            require: true
        },
        rows: {
            type: Array,
            require: true
        }
    }
}

效果图