iview Table组件选中某条数据后再编辑,选中的值不会改变-CSDN博客

问题描述: 写了个可编辑的table,我要获取选中的数据,我点击某一行选中之后,再编辑这一行的数据,然后保存,得到的是没有编辑之前的数据

1, 问题描述与图片

html代码

<Table
  border
  stripe 
  height="350"
  ref="selection"
  :columns="ProductFormList.columns"
  :data="ProductFormList.data"
  @on-selection-change="onSelectionChange">
</Table>
复制代码

ts代码

onSelectionChange (row) {
  console.log(row) // 获取选中的数据
  // 这样直接把选中的值赋给this.selectData,如果编辑数量之和,就很难更改this.selectData里面的值了
  this.selectData = row
}
复制代码

我先选中第一条数据,然后再编辑数量,此时数据已经拿到,编辑之后无法改变console.log(row)的数据

注: 数量编辑使用的是iview的 InputNumber 数字输入框组件

2, 解决代码(直接上代码了!)

html代码跟上面一样
ts代码

说明: selectData是在data里面定义的空数组,把选中获取的值赋给这个数组

  onSelectionChange (row) { // 点击checkbox的时候,更新数据
    this.updateData(row)
  }
  // 更新选中的数据
  updateData (val = this.selectData) {
    if (val.length) {
      let obj = {}
      val.forEach(v => { // 先循环选中的值,找到id,与所有data里的id进行比对
        obj[v.id] = v
      })
      // this.ProductFormList.data是这个表格里面所有的数据,过滤所有的数据跟选中的数据进行对比
      //因为表格里面的数据是实时更改的,
      this.selectData = this.ProductFormList.data.filter(v => {
        if (obj[v.id]) { // 循环data,如果里面有id跟选中的id一样,把这条数据赋值给this.selectData
          return v
        }
      })
    }
  }
复制代码

因为表格数据是动态获取的,用的render函数写的,部分代码如下

    columns: [{
        type: 'selection',
        width: 60,
        align: 'center'
      }, {
        title: '货品编号',
        key: 'serialNo'
      }, {
        title: '货品名称',
        key: 'name'
      }, {
        title: '单价',
        key: 'price'
      }, {
        title: '数量',
        key: 'quantity',
        render: (h, params) => {
          return h('div', [
            h('InputNumber', {
              props: {
                min: 0,
                value: params.row.quantity
              },
              on: {
                // 编辑数量的时候,触发的事件
                'on-change': e => {
                  params.row.quantity = e
                  productsGetPage[params.index] = params.row
                  this.updateData() // 改变的时候触发一下改变数据时事件,这样只要编辑了就会获取里面的值
                }
              }
            })
          ])
        }
      }]
复制代码