tdesign icon indicating copy to clipboard operation
tdesign copied to clipboard

[组件名称] 渲染器功能(预设+自定义入口),让表单组件也完全配置化

Open adoin opened this issue 1 year ago • 0 comments

这个功能解决了什么问题

重复的插槽编写,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的组件 也可以有个全局注册渲染器的地方,注册其他的自定义组件。 实际开发中这个会省去很多重复代码

adoin avatar Jun 10 '23 08:06 adoin