Vue组件返回的必要参数基础上再添加自定义参数

问题描述

1. 利用 Element-ui Upload 组件实现文件上传
2. Upload 是嵌套在表格中的
3. 上传文件成功之后，需要更改表格的数据，界面发生变化
4. 但是上传文件成功之后，只返回了文件的唯一标志ID，为了用户体验，页面不能刷新

解决思路

1. 将表格的rowData数据添加到成功回调函数中
2. 上传文件成功之后，将后台返回的数据和上传的文件信息组合，重新修改表格的数据，然后渲染到界面中
3. 由于 Upload 是一个独立的组件，返回的数据和信息是确定了的，那成功的回调函数是否支持把自定义的参数传递进去呢？

element-ui upload 组件支持用户自定义参数放到成功回调函数中

案例表述

<el-upload v-show="!scope.row.fileId"
	:show-file-list="false"
	class="upload-demo"
	:action="'/ctm01pec/api/v1/plansummary/upload?CId=' + scope.row.cid"
	:data="{CId: scope.row.cid}"
	name="file"
	:on-success="fileChangeAction.bind(this,scope)">
	<el-button type="default" :ref='scope.row.cid'>上传文件</el-button>
</el-upload>

// scope 是代表表格当前行代理对象
// res 上传文件成功之后后台返回的数据
// file 代表的是上传文件的信息
// fileList 代表的是Upload 上传文件的集合
fileChangeAction: function (scope, res, file, fileList) {
	if (res.code === '0') {
	this.$message({
	  showClose: true,
	  message: '上传文件成功',
	  type: 'success'
	})
	let tableIndex = scope.$index
	let newTableData = JSON.parse(JSON.stringify(this.tableData))
	newTableData[tableIndex].fileId = res.data
	newTableData[tableIndex].fileName = file.name
	this.tableData = newTableData
	}
},

1. 属性中直接使用 “函数名()”就是执行了函数，因此使用“函数名.bind(this,参数)”方式来传递参数
2. 组件为了支持用户自定义组件，就需要把用户传递的组件 + 功能函数传递的参数传递给用户

这种思路非常重要，方便用户扩展，保证用户自己传递自己想要的参数

fileChange (userParamObj) {
	let logicParams ={ ... }
	this.$emit('myAction', ...arguments, ...logicParams)
}