Vue 动态生成表单item

1.首先 判断list（几个item）的长度，判断根据特定标识动态生成 form对象 （动态绑定的数据）

2.绑定在组件上

3.在子组件里进行监听 computed，并且emit出去

大概过程如下：

searchData.map((item: any) => {
  let modelData = item.field + item.id
  if (item.uicomponent == '复选组') {
     form[modelData] = [];
   } else if (item.uicomponent == '范围') {
       form[modelData] = {first: "", second: ""}
      } else {
        form[modelData] = ""
      }
   })

其中范围 里面绑定两个v-model 所以绑定的数据是一个对象

 <search-item :child="child"
              :viewConfig="viewConfig"
               v-model="form[child.field+child.id]">
</search-item>

子组件里面：

<el-form-item class="btn-transfers"
                   :label="child.label">
    <el-input v-if="child.uicomponent == '文本'||child.uicomponent == '树形数据字典'"
                 v-model="searchValue"></el-input>
    <el-select filterable
                  @click="selectOptions(child.id)"
                  v-else-if="child.uicomponent == '列表'"
                  v-model="searchValue"
                  :options="options"
                  placeholder="请输入内容">
    </el-select>
    <el-cascader
        v-else-if="child.uicomponent == '级联'"
        v-model="searchValue"
        placeholder="请输入内容级联"></el-cascader>
</el-form-item>

props: ['propsTable', 'child', 'form', "modelValue","viewConfig"],

let searchValue = computed({
      get() {
        return props.modelValue
      },
      set(value) {
        console.log(value)
        context.emit("update:modelValue", value)
      }
    });

如此如此！