首页 > 其他分享 >Vue2 + antdv 动态修改a-table的行的值的数据

Vue2 + antdv 动态修改a-table的行的值的数据

时间:2022-11-22 13:44:55浏览次数:51  
标签:antdv Vue2 修改 点击 values key 回传 table 页面

需求:

在如下编辑页面的表格中,点击编辑,弹出频段编辑页面。修改完后数据回传并更新表单数据,不要通过后台。

实现步骤:

1. 点击编辑时记录行号

2. 传递当前记录到子页面

3. 子页面通过emit回传修改后的记录

4. 修改后的记录更新到表格

具体代码:

1. 点击编辑(或一行的空白处)记录行号

1) a-table添加 customRow属性,响应点击事件 :customRow="handleRowClick"

2)提供行点击事件

 <a-table :columns="columns" :data-source="spTests" :customRow="handleRowClick">

  

// 点击空白处获取当前行
    handleRowClick(record, index) {
      return {
        on: {
          click: () => {
            this.currRowIndex = index //暂存当前行号
          }
        }
      }
    },

  3. 子页面修改,emit回传数据

handleSubmit() {
      const {
        form: { validateFields }
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          for (const key in values) {
            if (typeof values[key] === 'object' && !(values[key] === null)) {
              values[key] = JSON.stringify(values[key])
            }
          }
          this.$emit('ok', values)//  回传数据
          this.handleCancel()
        }
        this.confirmLoading = false
      })
    },

  4. 父页面接收数据并更新数据

 <edit-spec-form ref="editSpecForm" @ok="handleEditOK" />

  

handleEditOK(it) {
      this.spTests[this.currRowIndex] = it //更新数据到当前行
     
    },

  

标签:antdv,Vue2,修改,点击,values,key,回传,table,页面
From: https://www.cnblogs.com/ccjungle/p/16914774.html

相关文章

  • [ERROR] mariadbd: The table 'INNODB_BUFFER_PAGE' is full
    问题描述:将information_schema导出sql文件到新库中恢复,sql中的表都是临时表,存储引擎都是memory,在导入的过程中实际大量会占用临时表。报错信息:ERROR1114(HY000)atline......
  • vue2 计算属性9 watch immediate
    watch:监听数据发生的变化 newVal是变化后的新值,oldVal是变化前的旧值 一般都是带着接口查询的watch:{username(newVal){if(newVal==='')return$get('https:......
  • vue2-vm.$set,vm.$delete实现(三)
    vm.$set实现语法:vm.$set(target,key,value)参数:{Object|Array}target{String|Number}key{any}value返回值:{Function}unwatch用法:在object上设置一个属......
  • 内存表(FDMEMTABLE)
    内存表的优点是快,非常快,号称比BDE的clientdataset快很多。内存表不但快,还可以另存为XML、BIN、CSV等数据。也可直接作为stream传送。所以,追求速度的时候,获得数据后即解除锁......
  • avue框架 拼接后端返回的数据到table中
    根据要求展示下列详细地址情况: 后端返回的数据:  具体实现步骤:  {label:"详细地址",prop:"buildingName",display:false,width:130,......
  • [Android开发学iOS系列] TableView展现一个list
    TableView基础本文讲讲TableView的基本使用.顺便介绍一下delegation.TableView用来做什么TableView用来展示一个很长的list.和Android中的RecyclerView不同,iOS中的......
  • datatables edit 重新定义 创建 修改 删除的 URL路径
    vareditor;//useaglobalforthesubmitandreturndatarenderingintheexamples$(document).ready(function(){editor=new$.fn.dataTable.Editor......
  • datatables edit 设置默认的语言
    vareditor;//useaglobalforthesubmitandreturndatarenderingintheexamples$(document).ready(function(){editor=new$.fn.dataTable.Editor......
  • vue2 过滤器8 私有过滤器 全局过滤器
    过滤器vue3已经去掉了   过滤器函数必须要定义到filters函数下,过滤器本质是也是一个函数,必须要return出去过滤器需有返回值val形参是前面的值 上述过滤器属于......
  • DataTable保存CSV
    也是转载的,不知道哪个是原作者,原作者若看到请联系本人注明usingSystem;usingSystem.Collections.Generic;usingSystem.Data;usingSystem.IO;usingSystem.Linq;u......