vue表格插槽

<tablecomponent :data="{items:[1,2,3]}">
    <template slot="thead">
        <label>table</label>
        <label>slot</label>
    </template>
    <template v-slot="{item}">
        <label>table{{item}}</label>
        <label>slot{{item}}</label>
    </template>
</tablecomponent>

<template>
    <table>
        <thead>
            <tr v-if="data&&data.titles">
                <td v-for="(v,i) of data.titles" :key="i">
                    <label v-text="v.text"></label>
                </td>
            </tr>
            <trext v-else>
                <slot name="thead"></slot>
            </trext>
        </thead>
        <tbody v-if="data&&data.items">
            <trext v-for="(v,i) of data.items" :key="i" :len="data&&data.titles&&data.titles.length">
                <slot :item="v"></slot>
            </trext>
        </tbody>
    </table>
</template>
<script>
    const trext = {
        props: ["len"],
        render: function (createElement) {
            let slots = this.$scopedSlots.default().filter(p => p.tag);
            return createElement('tr', Array.apply(null, { length: this.len || slots.length }).map((p, i) => createElement('td', [slots[i]])))
        }
    };
    export default {
        components: { trext },
        props: ["data"]
    }
</script>