关于el-table嵌套el-input-number 键盘回车换行时赋值失效的问题
时间：2023-04-05 18:52:39
HTML5
关于el-table嵌套el-input-number的问题，键盘回车换行时赋值失败，但是无法赋值，无法显示。这种现象只有在键盘输入换行时才会出现，鼠标在换行上点击时不会出现。解决了就可以解决了，但是不知道为什么会出现这种现象。先说解决方法：1.拆解el-input-number的v-model，写成：value="value"@change="handleChange"这样的形式2.out的handleBlur方法中的代码-of-focus事件改为异步执行；例如，handleBlur(){setTimeout(()=>{this.tbData[2].resultText}=100},0)}3。因为键盘回车和换行的事件触发顺序是回车->currentChange(newline)->blur；不同于鼠标操作时click->blur->currentChange(newline)的顺序，所以在键盘回车的回调函数中，首先调用e.target.blur()使输入失去焦点，从而使键盘操作和鼠标操作的执行顺序相同；4.不使用el-input-number组件，而是使用el-input组件或原始input标签接收传值。5、计算和赋值操作是在focus中执行的，但是我只想知道为什么执行blur的时候有问题；我个人认为这与el-input-number组件有关。如果不使用上述解决方案，组件将无法接受。父组件传递的计算值。但是还是不知道具体的原因是什么。上题代码：handleCurrentChange(row,oldrow)">saveAndNext(e)">{{scope.row.resultText}}
exportdefault{components:{//TableElInputNumber},data(){return{tbData:[{nodeId:'0',nodeName:'体高',resultText:null,resultUnit:'cm',refRange:null,resultPrompt:null},{nodeId:'1',nodeName:'体重',resultText:null,resultUnit:'kg',refRange:null,resultPrompt:null},{nodeId:'2',nodeName:'体重指数BMI',resultText:null,resultUnit:'mmhg',refRange:null,resultPrompt:null},{nodeId:'3',nodeName:'收窄压',resultText:null,resultUnit:'mmhg',refRange:null,resultPrompt:null},{nodeId:'4',nodeName:'舒张压',resultText:null,resultUnit:'mmhg',refRange:null,resultPrompt:null}],tbTitle:[{name:'nodeName',label:'name',width:'180',checked:true},{name:'resultText',label:'项目结果',width:'',checked:true},{name:'resultUnit',label:'unit',width:'100',checked:true},{name:'refRange',label:'参考值',width:'160',checked:false},{name:'resultPrompt',label:'Prompt',width:'100',checked:true}],currentRowIndex:0,currentRow:{}}},mounted(){this.$nextTick(()=>{//检查者default第一行this.setDefaultRow(this.tbData[0])})},methods:{handleFocus(curRow,index){console.log('%cfocus','background:red;color:#fff')},handleBlur(curRow,index){console.log('%cisoutoffocus','background:gray;color:#fff')//this.$nextTick(()=>{//如果是这里是异步的，也能解决问题//这里是计算和赋值方式，为了方便理解，直接赋值也能重现现象if(index===1){this.tbData[2].resultText=100}//})},//设置默认第一行选择setDefaultRow(row){this.$refs.normalTable.setCurrentRow(row,0)},//保存当前行并切换到下一行saveAndNext(e){//因为失去焦点会自动保存，所以这里直接切换到下一行（最后一行除外）console.log('%cbackCar','background:green;color:#fff')//e.target.blur()//进入马车时先调用blur方法可以解决这个问题this.selectNextRow()},//切换到下一行selectNextRow(){if(this.tbData&&this.tbData.length){if(this.currentRowIndex
el.nodeId===row.nodeId)this.$nextTick(()=>{this.$refs[this.currentRowIndex][0].focus()})}}}
