el-form回车焦点下一个+动态v-model

315 阅读1分钟

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);
      },
    },
  },