一、应用场景一，Upload组件传递element表格scope对象

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

1.1 解决思路

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

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

1.2 案例表述（bind函数传递参数）

<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)
}

二、场景二，循环传递索引index序号作为参数

1. 在表格中动态添加一个用户信息，用户关联手机号码
2. 只能把用户信息放到一个数组中，动态添加数组的数量，然后循环数组
3. 用户是根据用户输入的文字异步查询，形成下拉列表的，但是组件提供的第一个参数是 用户输入的值
4. 问题是我需要同时获取 数组的序号 和 用户返回的值？
5. 因此不能直接在组件定义的事件中使用方法，不然就只能获取到默认组件，而无法获取数组的索引值

2.1 解决办法 —— 使用箭头函数传递事件

<el-select
  v-model="userObj.personnelId"
  remote
  filterable
  reserve-keyword
  placeholder="请输入关键词"
  @change="(value) => selectUserAction(value, index)"
  :remote-method="(userinput,isSelect) => remoteMethod(userinput,isSelect, index)">
  <el-option
	v-for="item in userObj.searchUserlist"
	:key="item.personnelId"
	:label="item.personnelName"
	:value="item.personnelId">
  </el-option>
</el-select>

<script>
import * as API from '@/api/index.js'

export default {
  name: 'TableWithFilter',
  data () {
    return {
      tableData: [], // 表格数据      
      userList: [{
        personnelId: -1,
        personnelName: '',
        telNum: '',
        searchUserlist: []
      }, {
        personnelId: -1,
        personnelName: '',
        telNum: '',
        searchUserlist: []
      }, {
        personnelId: -1,
        personnelName: '',
        telNum: '',
        searchUserlist: []
      }]
    }
  },
  methods: {
	// 选择下拉选项之后触发的事件，将手机号和姓名显示出来
    selectUserAction (value, index) {
      let selectObj = this.userList[index]
      let userList = selectObj.searchUserlist
      for (let i = 0; i < userList.length; i++) {
        let searchUserObj  = userList[i]
        if (searchUserObj.personnelId === value) {
          selectObj.personnelName = searchUserObj.personnelName
          selectObj.telNum = searchUserObj.telNum
          break
        }
      }
    },
    // 根据查询条件查询
    searchUserListByCondition (username, index) {
      let paramObj = {
        pageNo: 1,
        pageSize: 10,
        personnelName: username
      }
      API.getPersonListService(paramObj).then(res => {
        if (res.data && res.data.list) {
          this.userList[index].searchUserlist = res.data.list
        }
      }).finally(() => {
      })
    },
    // 从远程根据名字查询
    remoteMethod (userinput, username, index) {
      this.searchUserListByCondition(userinput, index)
    }
  }
}
</script>

2.2 过程解析说明

(userinput,isSelect) => remoteMethod(userinput,isSelect, index)

等价于

function (userinput,isSelect) {
	remoteMethod(userinput,isSelect, index)
}

当触发remote-method事件的时候，组件会返回userinput,isSelect两个参数，并执行定义好的方法，方法里面会去执行remoteMethod方法，将默认组件返回的userinput,isSelect两个参数作为remoteMethod的前面两个参数，并且而外的添加了index数组索引的序号作为第三个参数，因此，通过这样，就能过获取组件自定义的参数和数组的序号

2.3 使用arguments

<AsyncSelectUser :originUserObj="userObj" @change="(data) => confirmUserAction(index, data)"></AsyncSelectUser>
// 等价于
<AsyncSelectUser :originUserObj="userObj" @change="confirmUserAction(index, arguments)"></AsyncSelectUser>