共计 3707 个字符,预计需要花费 10 分钟才能阅读完成。
如图,输出完身高 - 回车 - 输出体重,体重 input 失焦的时候会给第三行的 input 赋值,然而赋值不上,显示不进去,这种景象只有键盘回车换行的时候才会呈现,用鼠标点击换行却没有这种景象。
解决的话也能解决,然而不晓得为啥会呈现这种景象,先说解决办法:
1.el-input-number 的 v-model 拆开写,写成:value=”value” @change=”handleChange” 这种模式
2. 失焦事件 handleBlur 办法外面的代码改为异步执行;比方这样
handleBlur(){setTimeout(() => {this.tbData[2].resultText} = 100}, 0)
}
3. 因为键盘回车换行的事件触发程序为 回车 ->currentChange(换行)->blur;
和鼠标操作时的 点击 ->blur->currentChange(换行) 程序不一样,所以在键盘回车的回调函数里,先调用 e.target.blur() 让 input 失去焦点,让键盘操作和鼠标操作的事件执行程序一样;
4. 不必 el-input-number 组件,改用 el-input 组件或者原生 input 标签,就能接管到传递的 value 值。
5. 计算赋值操作在 focus 时执行,然而我就是想晓得为啥在 blur 执行的时候会呈现问题;
集体感觉跟 el-input-number 这个组件有些关系,不必上述解决办法的话,该组件承受不到父组件传递的计算好的 value 值。但还是不晓得具体的起因是什么。
上问题代码:
<template>
<div class="page">
<el-table
ref="normalTable"
:data="tbData"
highlight-current-row
@current-change="(row, oldrow) =>handleCurrentChange(row, oldrow)"
>
<template v-for="item in tbTitle">
<el-table-column
v-if="item.name ==='resultText'":key="item.name":label="item.label":prop="item.name"
>
<template slot-scope="scope">
<template v-if="scope.$index === currentRowIndex">
<!-- 应用 el-input 能够 -->
<!-- <el-input
:ref="scope.$index"
v-model="scope.row.resultText"
class="num"
size="mini"
@focus="handleFocus(scope.row, scope.$index)"
@blur="handleBlur(scope.row, scope.$index)"
@keyup.enter.native="e => saveAndNext(e)"
>
</el-input> -->
<!-- 应用 el-input-number 就不行 -->
<el-input-number
:ref="scope.$index"
v-model="scope.row.resultText"
class="num"
:min="-9999999999"
:max="9999999999"
size="mini"
@focus="handleFocus(scope.row, scope.$index)"
@blur="handleBlur(scope.row, scope.$index)"
@keyup.enter.native="e => saveAndNext(e)"
>
</el-input-number>
</template>
<template v-else>
{{scope.row.resultText}}
</template>
</template>
</el-table-column>
<el-table-column
v-else
:key="item.name"
:label="item.label"
:prop="item.name"
>
</el-table-column>
</template>
</el-table>
</div>
</template>
export default {
components: {
// Table
ElInputNumber
},
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: '名称', width: '180', checked: true},
{name: 'resultText', label: '我的项目后果', width: '', checked: true},
{name: 'resultUnit', label: '单位', width: '100', checked: true},
{name: 'refRange', label: '参考值', width: '160', checked: false},
{name: 'resultPrompt', label: '提醒', width: '100', checked: true} ],
currentRowIndex: 0,
currentRow: {}}
},
mounted() {this.$nextTick(()=>{
// 默认选中第一行
this.setDefaultRow(this.tbData[0])
})
},
methods: {handleFocus(curRow, index) {console.log('%c 聚焦', 'background:red; color:#fff')
},
handleBlur(curRow, index) {console.log('%c 失焦', '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('%c 回车', 'background:green; color:#fff')
// e.target.blur() // 回车时先调用 blur 办法能够解决该问题
this.selectNextRow()},
// 切换下一行
selectNextRow() {if(this.tbData&&this.tbData.length) {if(this.currentRowIndex < this.tbData.length-1) {
let index=this.currentRowIndex+1
this.$refs.normalTable.setCurrentRow(this.tbData[index], index)
}
else{// 如果曾经到最初一个了,是否须要设置保留按钮选中}
}
},
// 手动切换选中行
handleCurrentChange(row, oldRow) {console.log('%c 换行', 'background:#2a5cdf; color:#fff')
this.currentRow = row
this.currentRowIndex = this.tbData.findIndex(el => el.nodeId === row.nodeId)
this.$nextTick(()=>{this.$refs[this.currentRowIndex][0].focus()})
}
}
}
</script>
正文完