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>

页面结果如期现实

来源：oschina

链接：https://my.oschina.net/u/4329429/blog/4938365