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

问题

描述

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

代码

复制代码
<FormItem label="内饰颜色">
              <Table
                class="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="内饰颜色">
              <Table
                class="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

相关推荐
软件20512 分钟前
【redis使用场景——缓存——数据淘汰策略】
数据库·redis·缓存
ChinaRainbowSea24 分钟前
9-2 MySQL 分析查询语句:EXPLAIN(详细说明)
java·数据库·后端·sql·mysql
时序数据说26 分钟前
Java类加载机制及关于时序数据库IoTDB排查
java·大数据·数据库·物联网·时序数据库·iotdb
deeper_wind30 分钟前
MySQL数据库基础(小白的“升级打怪”成长之路)
linux·数据库·mysql
加勒比海涛40 分钟前
Spring Cloud Gateway 实战:从网关搭建到过滤器与跨域解决方案
数据库·redis·缓存
belldeep44 分钟前
java:如何用 JDBC 连接 TDSQL 数据库
java·数据库·jdbc·tdsql
格调UI成品3 小时前
预警系统安全体系构建:数据加密、权限分级与误报过滤方案
大数据·运维·网络·数据库·安全·预警
心平愈三千疾7 小时前
通俗理解JVM细节-面试篇
java·jvm·数据库·面试
Lx3528 小时前
排序缓冲区调优:sort_buffer_size的合理配置
sql·mysql·性能优化
我科绝伦(Huanhuan Zhou)9 天前
Oracle|Oracle SQL*Plus 配置上下翻页功能
数据库·sql·oracle