js 用json动态生成表单?

Question

根据json生成动态表单，怎么做呢？
有没有大佬提供个例子，有input输入框 有checkbox按钮就行？

Answer 1

v-for 实现

比如

[
    {type: 'input', value: ''},
    {type: 'checkbox', value: '', options: [{key: 1, value: 1}]},
]

内部判断 type 写逻辑即可。

<el-input v-if="item.type==='input'" v-model="item.value">

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

首先纠正一下楼主，checkbox是复选框，楼主说的这个是switch：开关
以jsx语法来进行解释：

• 首先需要定义一个自定义表单组件CustomForm，接收schema这个参数，对这个数组遍历判断类型进行相应的渲染；
• App组件则定义这个schema，首先必须有type，表明表单组件类型，另一个是props，就是该组件需要的参数，input组件一般需要最大长度、placholder等，switch则不需要定义props；如果说需要定义行内style也可以加上

function App() {
  const shema = [
    {
      type: 'input',
      props: {
        maxlength: 12,
      },
    },
    {
      type: 'switch',
    },
  ]
  return <CustomForm shema={shema}/>
}

function CustomForm({ shema }) {
  return (
    <>
      {shema.map(function (item,idx) {
        switch (item.type) {
          case 'input':
            return <input key={idx} {...item.props} />

          case 'switch':
            return <switch key={idx}/>

          default:
        }
      })}
    </>
  )
}

上面只是生成了表单项，如果需要更全面的话可以加上FormItem，并且给schema每一项加上title属性来展示FormItem的标题

Answer 3

不要重复造轮子了。。。
最近在用 formily 重构了项目的大表单，感觉很不错

Answer 4

你要的效果，官网已经给出了示例。构建动态表单