element el-table 回车移动光标

<template>
  <div>
    <el-button @click="add">新增</el-button>
    <el-button @click="save">保存</el-button>
    <el-form id="table-form" ref="form" :rules="rules" :model="form">
      <el-table ref="table" :data="form.tableData" border>
        <el-table-column>
          <template slot="header">
            <p>
              姓名
              <span style="color: red; font-size: 16px">*</span>
            </p>
          </template>
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.name'"
              :rules="rules.name"
            >
              <el-input
                v-model="scope.row.name"
                @dblclick.native="nameDbclick($event, scope.row)"
                @keyup.native.enter="nextFocus($event, scope.row, 'name')"
                @keyup.native="show($event, scope.row)"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot="header">
            <p>
              年龄
              <span style="color: red; font-size: 16px">*</span>
            </p>
          </template>
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.age'"
              :rules="rules.age"
            >
              <el-input
                v-model.number="scope.row.age"
                type="number"
                @keyup.native.enter="nextFocus($event, scope.row, 'age')"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column>
          <template slot="header">
            <p>
              爱好
              <span style="color: red; font-size: 16px">*</span>
            </p>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.over'">
              <el-select
                v-model="scope.row.over"
                placeholder="请选择"
                @keyup.native.enter="nextFocus($event, scope.row, 'over')"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot="header">
            <p>
              生日
              <span style="color: red; font-size: 16px">*</span>
            </p>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.bitthday'">
              <el-input
                v-model="scope.row.birthday"
                type="date"
                min="2020-01-02"
                max="2030-12-31"
                @keyup.native.enter="nextFocus($event, scope.row, 'bitthday')"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="身高">
          <template slot-scope="scope">
            <el-form-item>
              <el-input
                v-model.number="scope.row.height"
                type="number"
                @keyup.native.enter="nextFocus($event, scope.row, 'height')"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="年龄+身高" prop="other" />
      </el-table>
    </el-form>

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData" @row-dblclick="dbSelected">
        <el-table-column
          property="date"
          label="日期"
          width="150"
        ></el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRow: null,
      currentEl: null,
      inputDoms: "",
      tableIndex: 0,
      form: {
        tableData: [],
      },
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      rules: {
        name: [{ required: true, message: "名字不能为空", trigger: "blur" }],
        age: [{ required: true, message: "年龄不能为空", trigger: "blur" }],
      },
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,
    };
  },
  watch: {
    "form.tableData": {
      handler(val) {
        val.forEach((item) => {
          item.other = item.age + item.height;
        });
      },
      deep: true,
    },
  },
  created() {
    this.$nextTick(() => {
      this.initInputDOM();
    });
  },
  methods: {
    // 弹窗列表双击事件
    dbSelected(row) {
      this.currentRow.name = row.name;
      this.dialogTableVisible = false;
      this.currentEl.focus();
    },
    //姓名输入框双击事件
    nameDbclick(ev, row) {
      this.currentRow = row;
      this.currentEl = ev.target;
      this.dialogTableVisible = true;
      ev.target.blur();
    },
    //姓名输入框按键事件
    show: function (ev, row) {
      this.currentRow = row;
      this.currentEl = ev.target;
      console.log(ev.keyCode);
      if (ev.keyCode != 13) {
        this.dialogTableVisible = true;
        ev.target.blur();
        this.$nextTick(() => {
          ev.target.value = "";
        });
      }
    },
    //获取input元素内的选择部分
    getSelectText(t) {
      if (window.getSelection) {
        if (t.selectionStart != undefined && t.selectionEnd != undefined) {
          return t.value.substring(t.selectionStart, t.selectionEnd);
        } else {
          return "";
        }
      } else {
        return document.selection.createRange().text;
      }
    },
    initInputDOM() {
      //获取id为table-form下的所有input 框
      const inputDoms = document.querySelectorAll(
        "#table-form .el-input__inner"
      );
      //遍历这个input框给他们一个标识
      inputDoms.forEach((item, index) => {
        item.setAttribute("data-index", index);
      });
      this.inputDoms = inputDoms;
    },
    //回车事件
    nextFocus(event, row, columnName) {
      const index = event.target.getAttribute("data-index");
      const nextIndex = parseInt(index) + 1;
      const length = this.inputDoms.length;
      if (nextIndex < length) {
        this.inputDoms[nextIndex].focus();
        /*if((columnName=='name')){
          if(!event.target.value){
            console.log('null')
            this.dialogTableVisible=true
          }
        }else{
          this.inputDoms[nextIndex].focus();
        }*/
      } else {
        // 添加一行
        this.add();
        //回到第一个
        //this.inputDoms[0].focus();
        //this.inputDoms[nextIndex].focus();
      }
    },
    add() {
      this.form.tableData.push({
        name: "",
        age: "",
        height: "",
        other: "",
        birthday: "",
        over: "",
      });
      this.$nextTick(() => {
        this.initInputDOM();
      });
    },
    del(index) {
      this.form.tableData.splice(index, 1);
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log("通过");
          console.log(this.form.tableData);
        }
      });
    },
  },
};
</script>