viewDesign里的table内嵌套select动态添加表格行绑定内容丢失

问题

描述

viewDesign里的table内嵌套select，表格的行数是手动点击按钮添加的，添加第一行选择select的内容能正常展示，添加第二行第一行的select的内容消失

代码

<FormItem label="内饰颜色"><Tableclass="mt_10"border:columns="brandColumns":data="brandData"ref="table"style="width:700px"><template slot="brandListSlot" slot-scope="{ row,index }"><Select :key="row.id" ref="selects"  placeholder="输入关键字进行选择" v-model="row.brandId" filterable :loading="loading2" clearable:remote-method="remoteMethod1" ><Option v-for="item in brandSelectList" :key="item.id" :label="item.name ? item.name : ''" :value="item.id"></Option></Select></template></Table><Button class="appendBtn" type="info" @click="appendRow">添加一行</Button></FormItem>

解决

<FormItem label="内饰颜色"><Tableclass="mt_10"border:columns="brandColumns":data="brandData"ref="table"style="width:700px"><template slot="brandListSlot" slot-scope="{ row,index }"><Select :key="row.id" ref="selects"  placeholder="输入关键字进行选择" v-model="brandData[index].brandId" filterable :loading="loading2" clearable:remote-method="remoteMethod1" ><Option v-for="item in brandSelectList" :key="item.id" :label="item.name ? item.name : ''" :value="item.id"></Option></Select></template></Table><Button class="appendBtn" type="info" @click="appendRow">添加一行</Button></FormItem>

分析

• 直接绑定到 brandData[index].brandId 确保数据源始终是响应式的，避免中间对象（如 row）可能存在的引用问题。

• 避免响应式数据丢失问题（直接操作数组元素时，Vue 2.x 可能无法检测变化）。

• 通过 index 精准定位数据源，确保每行的 Select 独立管理自己的 brandId。