html 选中某行数据,iview Table组件 选中某条数据后再编辑,选中的值不会改变

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

1, 问题描述与图片

html代码

border

stripe

height="350"

ref="selection"

:columns="ProductFormList.columns"

:data="ProductFormList.data"

@on-selection-change="onSelectionChange">

复制代码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() // 改变的时候触发一下改变数据时事件,这样只要编辑了就会获取里面的值

}

}

})

])

}

}]

复制代码如有问题,欢迎指正