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>

页面结果如期现实

标签：slot,vue,name,import,组件,table,ref,test4
来源： https://blog.csdn.net/weixin_44494811/article/details/113265583