vue for循环列表（插槽）输入数据操作

vue for循环列表（插槽）输入数据操作

1、给循环的每一行的编辑框添加chang事件
输入框：参数（数据的唯一key，绑定的键名，$event.target.value值）

下拉框：参数（数据的唯一key，绑定的键名，$event值）

HTML部分：

 <div class="form-box" v-for="(items, index) in fixList" :key="index">
 	<-- 输入框 -->
 	<span class="label">收件人：</span>
	<a-input
	 placeholder="请输入姓名"
	 v-model="items.receiverName" 
	 @change="onCellChange(items.id,'receiverName', $event.target.value)"
	 />
	<-- 下拉框 -->
	<span class="delivery" style="margin-left:80px;display:inline-block">可用快递：
      <a-select
       show-arrow="false"
       v-model="items.idOExpress"
       @change="onCellChange(items.deliverTenantId,'idOExpress', $event, index)"
       >
       <a-select-option v-for="item in items.delivery" 
         :key="item.idExpress"
         :value="item.idExpress">
               {{item.name}}
          </a-select-option>
       </a-select>
     </span>
 <div>

JS部分：

    // 列表插槽数据处理
    onCellChange (key, dataIndex, value) {
      const fixList= [...JSON.parse(JSON.stringify(this.fixList))] // 注意深拷贝
      // item.id 第一个参数数据的唯一key
      const target = fixList.find(item => item.id=== key)
      let menuArr = target.menuArr
      target[dataIndex] = value
      if (target) {
       // 这里可以做每一个输入框数据的单独处理根据第二个参数 绑定的键名来判断 例如手机号phone
        if (dataIndex === 'phone') {
          if (value.length > 11) value = value.slice(0, 11)
          this.fixList[key].phone = this.fixList[key].phone.toString().slice(0, 11)
        }
        this.fixList = fixList
      }
    }