Element-ui踩坑
验证图片上传
其实 加上 prop就行了,再图上传成功的时候再做个图片验证取消就可以,看着麻烦其实挺简单的
<el-form
ref="ruleForm"
label-position="top"
:model="formData"
:rules="rules"
>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="营业执照" prop="businessLicense">
<el-upload
action=""
:auto-upload="false"
:before-upload="beforeAvatarUpload"
class="upload-demo"
drag
:limit="1"
:on-change="beforeUploadHandle"
:on-exceed="handleExceed"
>
<vab-icon icon="upload-line" style="margin: 40px 0 20px" />
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
js文件
beforeUploadHandle(file) {
if (file.type == 'change') return
const formData = new FormData()
formData.append('file', file.raw)
uploadBatch(formData).then(
(res) => {
viewsData.formData.businessLicense = res.data[0].url
ruleForm.value.validateField('businessLicense')
},
(err) => {
console.log(err)
}
)
},
vue+element-ui el-table组件内表单验证问题
动态绑定 prop :rechargeCommodityDTOS.’ + $index + ‘.cashAmount’
<el-table :data="popFormData.rechargeCommodityDTOS">
<el-table-column label="充值金额">
<template #default="{ row, $index }">
<el-form-item
:prop="'rechargeCommodityDTOS.' + $index + '.cashAmount'"
:rules="{
required: true,
message: '请输入充值金额',
trigger: ['blur', 'change'],
}"
>
<el-input
v-model="row.cashAmount"
class="filter"
placeholder="请输入充值金额"
type="number"
/>
</el-form-item>
</template>
</el-table-column>
</el-table>
el-table 图片上传
文件变动的时候,用箭头函数接收下file ,再传到文件上传的函数里即可,这样就可以同时将file和row一起放进去了
<el-upload action="" class="upload-demo" :on-change="(file) => { beforeUploadHandle(file, row)}
">
|