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

相关推荐
-SGlow-5 小时前
MySQL相关概念和易错知识点(2)(表结构的操作、数据类型、约束)
linux·运维·服务器·数据库·mysql
明月5666 小时前
Oracle 误删数据恢复
数据库·oracle
水瓶_bxt7 小时前
Centos安装HAProxy搭建Mysql高可用集群负载均衡
mysql·centos·负载均衡
♡喜欢做梦7 小时前
【MySQL】深入浅出事务:保证数据一致性的核心武器
数据库·mysql
遇见你的雩风8 小时前
MySQL的认识与基本操作
数据库·mysql
dblens 数据库管理和开发工具8 小时前
MySQL新增字段DDL:锁表全解析、避坑指南与实战案例
数据库·mysql·dblens·dblens mysql·数据库连接管理
weixin_419658318 小时前
MySQL的基础操作
数据库·mysql
不辉放弃9 小时前
ZooKeeper 是什么?
数据库·大数据开发
Goona_9 小时前
拒绝SQL恐惧:用Python+pyqt打造任意Excel数据库查询系统
数据库·python·sql·excel·pyqt
Olrookie10 小时前
若依前后端分离版学习笔记(三)——表结构介绍
笔记·后端·mysql