vue3 render函数jsx声明slot

注意2个api
renderSlot和slots的声明

<script lang="tsx">
import {useStore} from "vuex";

import {renderSlot} from "vue";
export default {
    name: 'FormItem',
    props: {
        lists: {type: Array, default: ()=>[],},
        row: {type: Object, default: ()=>{},},
        labelWidth: {type: String, default: '100px',},
        size: {type: String, default: '',},
        mb: {type: String, default: '4px',},
    },
    render(h) {
        const { lists, row, labelWidth, size } = h
        const store = useStore()
        const vnodes = []
        const {slots} = getCurrentInstance()
        vnodes.push(
            <el-form class="pr20" label-position="right" size={size} label-width={labelWidth}>
                <el-row class="tw-row">
                    {lists.map((item,i)=>{
                        let str = !!item.filter? store.getters.oEnumerate?.[item.filter]?.[row?.[item.key]] : row?.[item.key]
                        return <el-col span={item.col || 12} offset={item.offset || 0}>
                            <el-form-item class="w" label={item.label}  v-slots={{label:()=>item.customLabel?item.customLabel(row):item.lable}}>
                                {
                                    item.slot? renderSlot(slots, item.key, {'item': row, 'index': i}): <div class="tw-form-item line-clamp w">{!item.formatter?(str || '-'):(item.formatter(row))}</div>
                                }
                            </el-form-item>
                        </el-col>
                    })}
                </el-row>
            </el-form>
        )
        return vnodes
    },
}
</script>