不能将类型“(file: UploadFile) => void”分配给类型“() => void”。
来源:5-7 表单组件-单独处理上传组件-2
淡定的飞脚
2022-01-11
请问如下报错该怎么排查?
<template>
<div>
<!-- validate-on-rule-change="false"不需要一进来就验证 -->
<el-form
ref="form"
v-if="model"
:validate-on-rule-change="false"
:model="model"
:rules="rules"
v-bind="$attrs"
>
<template v-for="(item, index) in options" :key="index">
<el-form-item
:prop="item.prop"
:label="item.label"
v-if="!item.children || !item.children!.length"
>
<component
v-if="item.type !== 'upload'"
:placeholder="item.placeholder"
v-bind="item.attrs"
:is="`el-${item.type}`"
v-model="model[item.prop!]"
></component>
<el-upload
v-bind="item.uploadAttrs"
:on-preview="onPreview"
:on-remove="onRemove"
:on-success="onSuccess"
:on-error="onError"
:on-progress="onProgress"
:on-change="onChange"
:before-remove="beforeRemove"
:before-upload="beforeUpload"
:http-request="httpRequest"
:on-exceed="onExceed"
v-else
>
<!-- 给用户提示的区域 -->
<slot name="uploadArea"></slot>
<!-- 给用户提示的文字 -->
<slot name="uploadTip"></slot>
</el-upload>
</el-form-item>
<el-form-item
:prop="item.prop"
:label="item.label"
v-if="item.children && item.children.length"
>
<component
v-bind="item.attrs"
:placeholder="item.placeholder"
:is="`el-${item.type}`"
v-model="model[item.prop!]"
>
<component
v-for="(child, i) in item.children"
:key="i"
:label="child.label"
:value="child.value"
:is="`el-${child.type}`"
></component>
</component>
</el-form-item>
</template>
</el-form>
</div>
</template>
<script lang="ts" setup>
import { PropType, ref, onMounted, watch } from 'vue'
import { FormOptions } from './types/types'
import type { UploadFile } from 'element-plus/es/components/upload/src/upload.type'
let props = defineProps({
options: {
type: Array as PropType<FormOptions[]>,
required: true,
},
})
//局部引入,深拷贝
import cloneDeep from 'lodash/cloneDeep'
const model = ref<any>()
const rules = ref<any>()
const initForm = () => {
let m: any = {}
let r: any = {}
props.options.map((item: FormOptions) => {
m[item.prop!] = item.value
r[item.prop!] = item.rules
})
model.value = cloneDeep(m)
rules.value = cloneDeep(r)
console.log('model', model.value)
console.log('rules', rules.value)
}
onMounted(() => {
if (props.options && props.options.length) {
initForm()
}
})
//监听父组件传递进来的options的变化
watch(
() => props.options,
val => {
initForm()
},
{ deep: true }
)
//****************** 上传组件的所有方法 ******************
let emits = defineEmits([
'on-preview',
'on-remove',
'on-success',
'on-error',
'on-progress',
'on-change',
'before-remove',
'before-upload',
'http-request',
'on-exceed',
])
//点击文件列表中已上传的文件时
const onPreview = (file: UploadFile) => {
emits('on-preview', file)
}
//文件列表移除文件时
const onRemove = (file: UploadFile, fileList: UploadFile[]) => {
emits('on-remove', { file, fileList })
}
//文件列表移除文件时
const onSuccess = (response: any, file: UploadFile, fileList: UploadFile[]) => {
emits('on-success', { response, file, fileList })
}
// 文件上传失败时
const onError = (err: any, file: UploadFile, fileList: UploadFile[]) => {
emits('on-error', { err, file, fileList })
}
// 文件上传时
const onProgress = (event: any, file: UploadFile, fileList: UploadFile[]) => {
emits('on-progress', { event, file, fileList })
}
// 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
const onChange = (file: UploadFile, fileList: UploadFile[]) => {
emits('on-change', { file, fileList })
}
//上传文件之前
const beforeRemove = (file: UploadFile, fileList: UploadFile[]) => {
emits('before-remove', { file, fileList })
}
//删除文件之前
const beforeUpload = (file: UploadFile) => {
emits('before-upload', file)
}
// 覆盖默认的 xhr 行为,允许您实现自己的上传文件请求
const httpRequest = () => {
emits('http-request')
}
// 文件超出个数限制时
const onExceed = (file: UploadFile, fileList: UploadFile[]) => {
emits('on-exceed', { file, fileList })
}
</script>
<style lang="scss" scoped></style>
写回答
1回答
-
五月的夏天
2022-01-12
函数的参数类型不一致 。
022022-01-14
相似问题