vue v-for 下v-modal 问题

 

     项目需求：图中的表格是不固定的个数。根据后台返回的数据数组长度确定的。

每个河长都是一个elementui的远程select框。修改完成后表格数据保存到后台存储。

     问题：在使用v-for循环生成表格时对于表格中的select不写v-modal无法进行。

写了后会导致所有select都会绑定一个值，修改其中一个另一个也会改变，不符合项目要求。

解决思路肯定是绑定一个动态值。网上找到一个解决方案

https://segmentfault.com/q/1010000008764694

按照这个思路。

最后写成这种形式：

<el-select size="mini"
           class="form_item"
           v-model="DataValue[index]['secondUserName']"
           filterable remote :loading="loading2[index]"
           :remote-method="(query)=>{remoteRiverName(query,index,'loading2','RiverNameOptions2')}"
           @change="(newValue)=>{changeRiverName(newValue,index,false)}"
>

 

DataValue是循环数据

<div v-for="(item,index) in DataValue" :key="item.ids" style="margin: 10px 0">

 

 

remote-method后面

(query)=>{remoteRiverName(query,index,'loading2','RiverNameOptions2')
是因为页面有多个select为了传递区分参数