vue 3.x 插槽v-slot升级table组件

1.需求：iview的table组件提供了自定义列模板的方式，使用slot-scop，解构出我们需要的数据项，极大方便了我们的开发，现在我们用vue3.x的v-slot来升级这种自定义列模板的写法。

2.子组件,slot上命名每一项的数据的name，并定义属性传入对应的数据项

<template>
    <ul>
        <li v-for="item in data">
            <slot :name="item.slot" :row="item"></slot>
        </li>
    </ul>
</template>
<script>
import {
    
     ref } from 'vue'
export default {
    
    
    props:{
    
    
        data:{
    
    
            type:Array,
            default:()=>[]
        }
    },
}
</script>

3.父组件，根据v-slot:xxx来获取xxx项的插槽并解构对应属性获取该项数据

<template>
    <div>
        <test4 :data="data1">
            <template v-slot:name1="{row}">
                <span>{
    
    {
    
    row.name}}</span>
            </template>
        </test4>
    </div>
</template>
<script>
import test4 from '@/components/test4'
import {
    
    ref} from 'vue'
export default {
    
    
    components:{
    
    test4},
    setup(){
    
    
        return{
    
    
             data1:ref([
                {
    
    name:'lisi',age:23,slot:"name1"},
                {
    
    name:'zhangsan',age:11,slot:'name2'},
            ])
        }
    }
}
</script>

页面结果如期现实