Skip to content

Render2

渲染函数,可自定义写h函数或使用提供renderForm.ts的函数

签名

ts
function render2(formItem: DyFormItem): VNode

自定义h()

ts
const r = [
    {
        key: "username",
        label: "姓名",
        value: ref<string | null>(null),
        render2: f => h(NInput, {
            ...f,
            value: f.value.value, "onUpdate:value"(v) {
                f.value.value = v
            }
        })
    }
]

使用renderForm提供的renderXxx

目前提供有 "renderInput"| "renderSelect"| "renderPopSelect"| "renderTreeSelect"| " renderRadioGroup"| "renderRadioButtonGroup"| "renderCheckboxGroup"| "renderSwitch"| "renderDatePicker"| " renderTimePicker"| "renderCheckbox"| "renderDynamicTags"| "renderSlider"| "renderInputNumber"

ts
const r = [
    {
        key: "username",
        label: "姓名",
        value: ref<string | null>(null),
        render2: f => renderInput(f.value, {}, f),
    },
    {
        key: "job",
        label: "职位",
        value: ref<number | null>(null),
        options: ['前端', '后端'].map((label, value) => ({label, value})),
        render2: f => renderSelect(f.value, [], {}, f),
    }
]

其中renderXxx最后一个参数传入当前渲染项f,会组合渲染项的简化内容,例如placeholder,filterable,clearable,disabled等

与下拉框,单选,复选框相关

其中有 renderSelect,renderPopSelect,renderTreeSelect,renderRadioGroup,renderRadioButtonGroup,renderCheckboxGroup,都包含options,皆为renderXxx第二个参数传递

ts
const opts = Array.from({length: 5}).map((_, i) => `job_${i + 1}`)
const r = [
    {
        key: "job",
        label: "职位",
        value: ref<number | null>(null),
        // 下面三种用法提供options均可
        /*options: opts,
        render2: f => renderSelect(f.value, [], {}, f),*/
        // render2: f => renderSelect(f.value, opts, {}, f),
        render2: f => renderSelect(f.value, [], {options: opts}, f)
    }
]

1.其中options 你在 item项含options的可传入,renderXxx第二个参数也可传入,第三个optionProps也可传入

2.优先级,函数传参 < item的options < optionProps

更多简化render函数等待后续更新