今天的标题有点长,其实bug也不一定就是vex-table才会有,el-table也许也会遇到
列表有一列是可编辑的数字类输入框
用的是input事件
<vxe-table
ref="xTable"
show-overflow
auto-resize
height="600"
border
align="center"
:edit-config="{ trigger: 'click', mode: 'cell', showIcon: false }"
empty-text="暂无数据"
:data="inventoryListData"
:cell-class-name="cellClassName"
>
<vxe-column min-width="100px" field="qtyActual" title="数量"
:edit-render="{ name: 'input', autoselect: true }"
show-overflow>
<template #edit="{ row, rowIndex }">
<el-input-number
v-model="row.qtyActual"
:step="1"
:disabled="isDisabledTable"
:controls="false"
:min="0"
@input="sumAmount(row, rowIndex)"
></el-input-number>
</template>
</vxe-column>
</vxe-table>
排查后发现不是vxe-table表格的问题,也不是edit插槽的渲染问题,而是这个sumAmount方法写的有问题
// 数量求和
sumAmount(row, index) {
if (row.qtyActual <= row.qty) {
// 金额
row.costActual = ((row.cost / row.qty) * row.qtyActual).toFixed(2)
} else {
row.qtyActual = ''
this.$message.warning('xx数量应小于等于xx数量!')
}
this.inventoryListData.splice(index, 1, row)
},
问题就出在最后一行代码上,在经过一些计算后,将最新的row替换原来的row
关键是splice方法会改变原数组
解决方法:
1、可以将input事件换为change事件
2、还是用input事件,直接注掉this.inventoryListData.splice(index, 1, row)