Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
adoin opened this issue Jun 10, 2023 · 0 comments
Labels
💭 discussion we are discussing

Comments

@adoin
Copy link

adoin commented Jun 10, 2023

这个功能解决了什么问题

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

@xiaosansiji xiaosansiji added the 💭 discussion we are discussing label Jun 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💭 discussion we are discussing
Projects
None yet
Development

No branches or pull requests

2 participants