SOURCE

Vue.createApp({
    setup() {
        return {
            datasource: {
                raw: {
                    type: 'rawdata',
                    data: {
                        options: [{
                            key: 0, label: 'select 1'
                        }, {
                            key: 1, label: 'select 2'
                        }]
                    }
                }
            },
            listeners: [
                {
                    watch: '$:model.selected',
                    actions: [{ handler: '@model.checks:[`select ${model.selected+1}`]' }],
                },
            ],
            model: { checks: [] },
            fields: [{
                component: 'el-form',
                rowProps: {
                    gutter: 20
                },
                props: {
                    labelWidth: '120px'
                },
                children: [{
                    component: 'el-input',
                    model: 'model.text',
                    colProps: { span: 24 },
                    formProps: { label: 'text1' }
                }, {
                    component: 'el-select',
                    model: 'model.selected',
                    colProps: { span: 12 },
                    formProps: { label: 'selected' },
                    children: '$:raw.options.map(item=>({component:"el-option", props:{label:item.label, value:item.key}}))'
                }, {
                    component: 'el-checkbox-group',
                    model: 'model.checks',
                    colProps: { span: 12 },
                    checkItems: '$:raw.options',
                    formProps: {
                        label: 'checks'
                    }
                }, {
                    component: 'el-slider',
                    model: 'model.num',
                    colProps: { span: 24 },
                    formProps: { label: 'change width' },
                    props: { min: 6, max: 24 }
                }, {
                    component: 'el-input',
                    model: 'model.text',
                    colProps: { span: '$:model.num' },
                    formProps: { label: 'width' },
                }]
            }, {
                component: 'p',
                text: '$:JSON.stringify(model)'
            }]
        }
    },
    methods: {
        onSetup({ prerender, datasource }) {
            // 在组件外部套一个 el-form-item
            prerender(({ proxy, context }) => (field, next) => {
                if (!field.formProps) {
                    next(field)
                    return
                }

                const formProps = field.formProps

                delete field.formProps

                next(proxy.inject(
                    {
                        component: 'el-form-item',
                        props: formProps,
                        children: [field]
                    },
                    context
                ))
            }, 2)

            // 在组件内部套一个 el-row
            prerender(() => (field, next) => {
                if (!field.rowProps) {
                    next(field)
                    return
                }

                const rowProps = field.rowProps

                delete field.rowProps

                field.children = [{
                    component: 'el-row',
                    props: rowProps,
                    children: field.children
                }]

                next(field)
            })

            // 在组件外部套一个 el-col
            prerender(({ proxy, context }) => (field, next) => {
                if (!field.colProps) {
                    next(field)
                    return
                }

                const colProps = field.colProps

                delete field.colProps

                next(proxy.inject(
                    {
                        component: 'el-col',
                        props: colProps,
                        children: [field]
                    },
                    context
                ))
            }, 1)

            // checkbox group items
            prerender(() => (field, next) => {
                if (!field.checkItems) {
                    next(field)
                    return
                }

                field.children = field.checkItems.map(item => ({
                    component: 'el-checkbox',
                    props: { label: item.label }
                }))

                delete field.checkItems

                next(field)
            })

            datasource('rawdata', (props) => {
                return props.data
            })
        }
    }
})
    .use(ElementPlus)
    .use(JRenderFull)
    .mount('#app')

<html>

<head>
	<title>Json to render</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@next/dist/vue.global.prod.js">
	</script>
	<script src="https://cdn.jsdelivr.net/npm/element-plus/lib/index.full.js">
	</script>
	<script src="https://cdn.jsdelivr.net/npm/@json2render/vue-full">
	</script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/lib/theme-chalk/index.css">
</head>

<body>
	<div id="app">
		<v-jrender v-model="model" :fields="fields" :datasource="datasource" :listeners="listeners" @setup="onSetup"></v-jrender>
	</div>
</body>

</html>