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>

頁面結果如期現實