最近项目中一处附件上传,点击取消得时候要清空列表。因为本身附件上传组件已有删除,而这个取消按钮是不调用接口得。但是用组件属性就是会报错
,因此就让他局部刷新一下:

<div class="file-info bdr10"
v-if="isRouterAlive">
<!-- 1======课后作业 -->
<upload-file-flex ref="upload"
v-model="ruleForm.annex"
@getFileList="getFileList"
:accept="'.docx,.pdf'"
:limit="1"></upload-file-flex>
</div>
<div class="text-center"
style="margin-top:10px">
<el-button round
@click="removeFile"
size="mini">取消</el-button>
<el-button type="primary"
size="mini"
:ldstatus="ldstatus"
style="background: #056AFF;"
@click="subMit"
round>保存</el-button>
</div>
export default {
name: "app",
data() {
return {
isRouterAlive: true,
};
},
provide() {
return {
removeFile: this.removeFile,
};
},
methods: {
removeFile () {
this.isRouterAlive = false;
this.$nextTick(function () {
this.ruleForm.annex = ''
this.isRouterAlive = true;
});
},
},
};
这篇博客讲述了在项目中遇到的一个问题,即在附件上传组件中,如何实现在点击取消按钮时不调用接口并清空列表。作者通过设置`isRouterAlive`状态并在`nextTick`中操作,成功实现了附件列表的局部刷新,从而避免了组件报错。

被折叠的 条评论
为什么被折叠?



