<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"
请问该如何解决这个问题呢?
是不是表单里存在类型不能确定的条目,或者干脆就是和数据的类型不一致,引起 ts 的类型检查没有通过 ?
看下表单里的每个 el-form-item 输入类型是不是正确。
如果有类型不确定的表单项,可以用类型断言,让类型保持一致就可以了。