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>

页面结果如期现实

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

上一篇:Stream常见操作


下一篇:C# 监测每个方法的执行次数和占用时间(测试4)