一、在 vue2 中你需要把 属性 放在 props
下,事件 放在 on
下
vue2 jsx 中写法:
renderItem() {
const {itemProps, slot, render, field, suffix, component} = this.$props.schema;
const {colon} = this.$props.formProps;
console.log({...(itemProps)})
const getContent = () => {
return this.renderComponent();
};
const obj = {
label:3
}
// 划重点
// 在 vue2 中你需要把 属性 放在 props 下,事件 放在 on 下
// 而 vue3 中函数渲染属性被展平了
const dynamicBind = {
props: { label: 3, required: true }
}
return (
<el-form-item
{...dynamicBind}
>
<div style="display:flex">
<div style="flex:1;">{getContent()}</div>
</div>
</el-form-item>
);
},
二、vue3 中函数渲染属性被展平了
vue3 jsx 中写法:
function renderItem() {
const { itemProps, slot, render, field, suffix, component } = props.schema;
const { labelCol, wrapperCol } = unref(itemLabelWidthProp);
const { colon } = props.formProps;
if (component === 'Divider') {
return (
<Col span={24}>
<Divider {...unref(getComponentsProps)}>{renderLabelHelpMessage()}</Divider>
</Col>
);
} else {
const getContent = () => {
return slot
? getSlot(slots, slot, unref(getValues))
: render
? render(unref(getValues))
: renderComponent();
};
const showSuffix = !!suffix;
const getSuffix = isFunction(suffix) ? suffix(unref(getValues)) : suffix;
return (
<Form.Item
name={field}
colon={colon}
class={
{ 'suffix-item': showSuffix }}
// vue3 中函数渲染属性被展平了 如下
{...(itemProps as Recordable)}
label={renderLabelHelpMessage()}
rules={handleRules()}
labelCol={labelCol}
wrapperCol={wrapperCol}
>
<div style="display:flex">
<div style="flex:1;">{getContent()}</div>
{showSuffix && <span class="suffix">{getSuffix}</span>}
</div>
</Form.Item>
);
}
}