请问在el-form 中通过给model绑定一个reactive数据时报错?

新手上路,请多包涵
<el-form :model="searchForm" ref="formRef" label-width="80px" size="large">
      <el-row :gutter="20">
        <template v-for="item in searchConfig.formItems" :key="item.prop">
          <el-col :span="8">
            <el-form-item :label="item.label" :prop="item.prop">
              <template v-if="item.type === 'input'">
                <el-input
                  v-model="searchForm[item.prop]"
                  :placeholder="item.placeholder"
                ></el-input>
              </template>

截取了一部分,思想是后台管理系统用传入的参数生成模板页面
js部分代码

interface IProps {
  searchConfig: {
    formItems: any[]
  }
}
// 上面用动态组件 <component :is=`el-{item.type}` 或
const initialForm: any = {}
const props = defineProps<IProps>()
for (const item of props.searchConfig.formItems) {
  initialForm[item.prop] = ''
}
// 定义自定义事件
const emit = defineEmits(['queryClick', 'resetClick'])

// 定义form的数据 any 类型
const searchForm = reactive(initialForm)

文件定义传入的生成数据

const searchConfig = {
  formItems: [
    {
      type: 'input',
      prop: 'name',
      label: '部门名称',
      placeholder: '请输入查询的部门名称'
    },
    {
      type: 'input',
      prop: 'leader',
      label: '部门领导',
      placeholder: '请输入查询的领导名称'
    },
    {
      type: 'date-picker',
      prop: 'createAt',
      label: '创建时间'
    }
  ]
}
export default searchConfig

使用数据 <page-search :search-config="searchConfig" @query-click="handleQueryClick" @reset-click="handleResetClick"/>

报错原因

类型 unknown 不可分配给类型 InferPropType<ObjectConstructor> 类型 unknown 不可分配给类型 Record<string, any>
位置::model="searchForm"
请问该如何解决这个问题呢?

阅读 2k
1 个回答

是不是表单里存在类型不能确定的条目,或者干脆就是和数据的类型不一致,引起 ts 的类型检查没有通过 ?
看下表单里的每个 el-form-item 输入类型是不是正确。
如果有类型不确定的表单项,可以用类型断言,让类型保持一致就可以了。

推荐问题
logo
Microsoft
子站问答
访问
宣传栏