avue crud upload组件 增加自定义参数
在某项目中使用avue crud upload 控件实现文件上传。想要携带参数,依据文档可配置data参数,应该于upload-before事件中进行data赋值,以达到修改参数的目的。上源码:crud upload columnexport const tableUploadOption = {border: true,index: false,indexLabel: '序号',stripe:
·
在某项目中使用avue crud upload 控件实现文件上传。想要携带参数,依据文档可配置data参数,应该于upload-before事件中进行data赋值,以达到修改参数的目的。
上源码:crud upload column
// 子grid上传信息表格(带upload字段)
export const tableUploadOption = {
border: true,
index: false,
indexLabel: '序号',
stripe: true,
menuAlign: 'center',
align: 'center',
viewBtn: false,
searchMenuSpan: 6,
editBtn: false,
saveBtn: false,
addBtn: true,
column: [
{
label: '编号',
prop: 'id',
hide: true,
addDisplay: false
},
{
hide: true,
label: '附件上传',
prop: 'imgUrl',
type: 'upload',
loadText: '附件上传中,请稍等',
span: 24,
props: {
label: "fileName",
value: "url",
},
propsHttp: {
res: 'data',
name: "fileName",
url: "url"
},
tip: '上传同步至文件服务器',
action: "/bzyz/apply/upload",
data: {} //指定上传参数
},
...
]
}
vue 代码:
<avue-crud ref="upload"
:page.sync="page2"
:data="tableData2"
:permission="permissionList2"
:table-loading="tableLoading2"
:option="tableOption2"
@on-load="getList2"
@search-change="searchChange2"
@refresh-change="refreshChange2"
@size-change="sizeChange2"
@current-change="currentChange2"
@row-del="rowDel2"
:upload-error="uploadError"
:upload-delete="uploadDelete"
:upload-before="uploadBefore" //本应在该事件中完成上传参数data赋值
:upload-after="uploadAfter">
<template slot="menuLeft">
<!-- 除了要求有上传权限,还要求选中父级记录 -->
<el-button
v-show="permissions.bzyz_apply_upload && (selectionList && selectionList.id >=0)"
type="primary"
icon="el-icon-upload"
size="small"
plain
@click="$refs.upload.rowAdd()">上传
</el-button>
</template>
</avue-crud>
对应的事件代码:
uploadBefore(file, done, loading, column) {
column.data = {parentId: 123456}; //设置上传参数
done();
},
但实际操作过程中,一直出现本次上传的参数为前一次传参的data数据,慢一拍。
因此使用watch监听解决,在上传之前(upload-before事件之前)进行data修改。
watch: { // 监控选中的父级记录,当父级记录变化时重新设置upload上传参数 selectionList (val, oldVal) { let uploadUrl = this.findObject(this.tableUploadOption.column, 'imgUrl'); uploadUrl.data = {pid: val.id}; //找到该数据直接修改 this.refreshChange(); //查询刷新,省略代码 }
注:在本示例中selectionList 为 父级选中的行记录,即为当选中父级记录的时候进行子Grid中upload参数设置。因此该参数为在触发upload上传方法前所需监控的变量。
依据avue issue也发现了类似的与upload相关问题,如果更新版本依然无效可以尝试上述方法。
更多推荐
已为社区贡献4条内容
所有评论(0)