el-form键盘按下回车,焦点跳到下一个input
Vue.directive("enterToNext", {
inserted: function (el) {
console.log("enterToNext...");
//let frm = el.querySelector('.el-form');
let inputs = el.querySelectorAll("input");
//绑定回写事件
for (var i = 0; i < inputs.length; i++) {
inputs[i].setAttribute("keyFocusIndex", i);
inputs[i].addEventListener("keyup", (ev) => {
if (ev.keyCode === 13) {
let targetTo = ev.srcElement.getAttribute("keyFocusTo");
if (targetTo) {
this.$refs[targetTo].$el.focus();
} else {
var attrIndex = ev.srcElement.getAttribute("keyFocusIndex");
var ctlI = parseInt(attrIndex);
if (ctlI < inputs.length - 1) inputs[ctlI + 1].focus();
}
}
});
}
},
});
<el-form ref="forms" class="detailform" v-enterToNext="true">
动态v-model
根据detailform.patientType判断label和v-model
本来可以用v-if或者v-show直接切换,但是因为自定义v-enterToNext获取不到改变后的input,导致回车失效。
<el-form-item
:label="detailform.patientType == 1 ? '住院号' : '门诊号'"
label-width="68px"
>
<el-input
:readonly="editType"
v-model="computeType"
placeholder="请输入门诊号或者住院号"
size="small"
@blur="updatafoce"
@focus="handleleftTable"
/>
<!-- detailform.patientType == 1
? detailform.visitId
: detailform.outpatientId -->
</el-form-item>
computed: {
computeType: {
get() {
return this.detailform.patientType == 1
? this.detailform.visitId
: this.detailform.outpatientId;
},
set(val) {
this.detailform.patientType == 1
? (this.detailform.visitId = val)
: (this.detailform.outpatientId = val);
},
},
},