绑定的数据未刷新是vue的绑定深度过多,没有关联绑定起来,点击一次后会出现光标丢失现象。
查阅了众多方法找到一个简单的方法在此记录,原理是每次更新数据刷新table使他重新渲染。
在table中绑定key

data return内部添加 tablekey: false
在inputNumber内

<el-table
:data="tableData"
border
:key = "tablekey"
style="width: 100%">
<el-table-column
prop="num"
label="数量">
<template slot-scope="scope">
<el-input-number v-model="scope.row.num" @change="()=>tablekey=!tablekey" size="small" :min="0" :max="99"/>
</template>
</el-table-column>
</el-table>
data(){
return{
tableData:[],
tablekey: false
}
},
这个只是能用,如果有更好的办法欢迎交流。
本文记录了一种解决Vue中表格数据不更新及输入框光标丢失的简单方法。通过在table中绑定key并动态改变key值,强制Vue重新渲染表格,从而确保数据更新。在data中添加`tablekey`属性,并在inputNumber的change事件中切换其值,实现了表格的刷新。这种方法有效但可能不是最优解,欢迎探讨更佳方案。
1533





