vue 上传视频和treeselect校验规则的清空
【代码】vue 上传视频和treeselect校验规则的清空。
·
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="归属部门" ref="deptId" prop="deptId">
<treeselect v-model="form.deptId" @input="handleTreeSelectChange" :options="deptOptions"
:disable-branch-nodes="true" :show-count="true" placeholder="请选择归属部门" />
</el-form-item>
<el-form-item label="音频" ref="qVoice" prop="qVoice" style="margin-bottom: 10px;">
<el-upload ref="upload" :show-file-list="false" class="upload-demo" :on-success="handleSuccess"
:headers="headers" :accept="'audio/*'" :action="uploadUrl" :file-list="fileList" :before-remove="beforeRemove"
:on-exceed="handleExceed" :limit="1">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip" style="height: 20px;">
只能上传音频文件,大小不能超过500M
</div>
<div v-if="fileList.length > 0" slot="tip" class="el-upload__tip bgList"><i class="el-icon-document"></i>
<span>{{ fileList[0].name }}</span><i class="el-icon-upload-success el-icon-circle-check bgListSuccess"
style="color: #13ce66;margin-left: 30px;"></i><i style="margin-left: 30px;"
class="el-icon-close bgListclose" @click="delFileList"></i>
</div>
</el-upload>
</el-form-item>
</el-form>
rules: {
qVoice: [
{ required: true, message: "音频不能为空", trigger: 'blur' },
],
deptId: [
{ required: true, message: "归属部门不能为空", trigger: "blur" }
],
}
//归属部门有值就清空
handleTreeSelectChange (value) {
if (value) {
this.$refs.form.validateField('deptId')
}
},
//音频上传成功清空
handleSuccess (response, file) {
this.$refs.qVoice.clearValidate()
},
更多推荐
已为社区贡献2条内容
所有评论(0)