RicardoWee 2022-08-01 16:47 采纳率: 63.6%
浏览 64
已结题

el-table编辑行内容遇到的问题

问题遇到的现象和发生背景

vue相关,更改选中行的数据。
选中行row,然后传递数据给弹窗dialog,在里面更改完后再传递给父组件el-table。
这里操作按钮是在el-table外部。

img

问题相关代码,请勿粘贴截图
// 编辑行
    editRow(val, origin) {
      console.log(val)
      console.log('上面是更改数据,下面是原始数据')
      console.log(origin)
      //在原始数据中根据id来查找更改行的索引
      let index = this.tableData.findIndex(
          (item) => item.deviceId === origin.deviceId
      )
      console.log(index)
      //然后替换成性新修改的值
      this.tableData.splice(index, 1, val)
      this.checkData = []
      //重新搜索空内容,展示原始数据
      this.searchRow(null)
    }
我的解答思路和尝试过的方法

我尝试使用当前选中行的【行数】来作为条件查询索引,但如果是在【查询】后再对查询结果选中编辑的话,所返回的索引就和原始tableData内对不上。

譬如是我查询1条id为15的数据,原始数据中他的行数为10,但查了过后行数为1,此时修改的话原始数据中原本行数1的内容就被替换掉了。

但如果直接用id来进行查询索引的话,无法保证表格中该字段不存在重复值(主键作查询条件确实可以,确保唯一性)但如果不能暴露主键呢?

我想要达到的结果

想要的结果就是,子组件返回编辑后的内容时,无论是否为查询过以及是否字段有重复值,都要准确无误地正好将修改内容给到当前选中行,而非其他行!不想在table里面加编辑字段

  • 写回答

3条回答 默认 最新

  • 林晓风 2022-08-01 17:00
    关注

    直接获取到对象的值传到你的editRow方法里面哇,下面举个例子,scope.row就是整个一行的信息

    
    <el-table-column align="center" label="操作" width="255">
              <template #default="scope">
                <el-button
                  icon="el-icon-edit"
                  type="text"
                  @click="handleEdit(scope.$index, scope.row)"
                  >修改</el-button
                >
                <el-button
                  icon="el-icon-delete"
                  style="color: #ff0000"
                  type="text"
                  @click="handleDelete(scope.row.id)"
                  >删除
                </el-button>
              </template>
            </el-table-column>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 10月25日
  • 已采纳回答 10月17日
  • 创建了问题 8月1日

悬赏问题

  • ¥15 使用wpf制作打砖块游戏时遇到的一个Bug
  • ¥15 qrCodeDetector.detectAndDecode
  • ¥15 海洋可控源和大地电磁一维联合反演
  • ¥15 MFC多文档程序获取视图指针问题
  • ¥20 解体如何编写程序还有运行结果截图
  • ¥15 如何把matlabR2023遗传算法工具箱里面的各类选项对应的代码调出来呢?
  • ¥30 MDIGetActive() 获取活动view
  • ¥15 有数据,如何安装使用CLIP模型检索图片
  • ¥15 lingo代码报错无法运行,如何解决,如果能解决请提供能够运行的lingo代码
  • ¥100 读取 IMU BNO080 数据