tdesign
tdesign copied to clipboard
[组件名称] 渲染器功能(预设+自定义入口),让表单组件也完全配置化
这个功能解决了什么问题
重复的插槽编写,vue组件的一大痛点。
你建议的方案是什么
参考VXE-table的渲染器,减少重复写插槽的重复劳动。 理想中的组件:
const formSetting = reactive<TFormProps>({
rules:{...},
data:formData.value,
items:[
{
field:'name',
label:'姓名',
span:8,
itemRender:{
name:'$input',// 内置渲染器,在对应item渲染Tdesign的input
}
},
{
label:'详细信息',
span:24,
children:[
{
field:'age',
label:'年龄',
span:8,
itemRender:{
name:'$input',
props:{
type:'number',
min:0,
}
}
},
{
field:'gender',
label:'性别',
span:8,
itemRender:{
name:'$switch',
props:{
trueLabel:'男',
falseLabel:'女',
}
}
}
]
}
]
})
$input $switch 等对应Tdesign的组件 也可以有个全局注册渲染器的地方,注册其他的自定义组件。 实际开发中这个会省去很多重复代码