element el-table嵌套el-input ,且点击回车input焦点切换

element el-table嵌套el-input ,且点击回车input焦点切换

<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules">
      <el-table stripe :data="form.arr" border>
        <el-table-column type="index" label="序号" align="center" width="50" fixed="left" />
        <el-table-column :width="labelWidth">
          <template slot="header">
            <span class="colorRed">*商品类型</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="`arr.${scope.$index}.base_type`" :rules="rules.base_type">
              <el-select v-model="scope.row.base_type" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :width="labelWidth">
          <template slot="header">
            <span class="colorRed">*品牌</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="`arr.${scope.$index}.base_brand`" :rules="rules.base_brand">
              <el-input v-model="scope.row.base_brand" @keydown.enter.native="nextFocus($event,scope.row)" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :width="labelWidth">
          <template slot="header">
            <span class="colorRed">*品类</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="`arr.${scope.$index}.base_class`" :rules="rules.base_class">
              <el-input v-model="scope.row.base_class" @keydown.enter.native="nextFocus($event,scope.row)" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :width="labelWidth">
          <template slot="header">
            <span class="colorRed">*型号</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="`arr.${scope.$index}.base_model`" :rules="rules.base_model">
              <el-input v-model="scope.row.base_model" @keydown.enter.native="nextFocus($event,scope.row)" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :width="labelWidth">
          <template slot="header">
            <span class="colorRed">*色号/折射率</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="`arr.${scope.$index}.base_color`" :rules="rules.base_color">
              <el-input v-model="scope.row.base_color" @keydown.enter.native="nextFocus($event,scope.row)" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="系列" :width="labelWidth">
          <template slot-scope="scope">
            <el-form-item :prop="`arr.${scope.$index}.base_range`">
              <el-input v-model="scope.row.base_range" @keydown.enter.native="nextFocus($event,scope.row)" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="材质" :width="labelWidth">
          <template slot-scope="scope">
            <el-form-item :prop="`arr.${scope.$index}.base_material`">
              <el-input v-model="scope.row.base_material" @keydown.enter.native="nextFocus($event,scope.row)" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="提供自定义搜索的参数" width="170">
          <template slot-scope="scope">
            <el-form-item :prop="`arr.${scope.$index}.base_search`">
              <el-input v-model="scope.row.base_search" @keydown.enter.native="nextFocus($event,scope.row)" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="120">
          <template slot-scope="scope">
            <el-form-item :prop="`arr.${scope.$index}.base_price`">
              <el-input v-model="scope.row.base_price" type="number" @keydown.enter.native="nextFocus($event,scope.row)" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="进货价" width="120">
          <template slot-scope="scope">
            <el-form-item :prop="`arr.${scope.$index}.base_buyingprice`">
              <el-input v-model="scope.row.base_buyingprice" type="number" @keydown.enter.native="nextFocus($event,scope.row)" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="佣金" width="120">
          <template slot-scope="scope">
            <el-form-item :prop="`arr.${scope.$index}.base_brokerage`">
              <el-input v-model="scope.row.base_brokerage" type="number" @keydown.enter.native="nextFocus($event,scope.row)" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="130px">
          <template slot-scope="scope">
            <el-button type="text" @click="del(scope.$index)">移除</el-button>
            <el-button type="text" @click="copy(scope.$index,scope.row)">复制此行</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div class="footerButton">
      <el-button type="primary" @click="add">添加一行</el-button>
      <el-button type="success" @click="save">确定新增</el-button>
    </div>
  </div>
</template>

<script>
const options = [
  { value: 0, label: '镜片' },
  { value: 1, label: '镜架' },
  { value: 2, label: '太阳镜' },
  { value: 3, label: '老花' }
]
export default {
  name: 'AddGoodsList',
  data() {
    return {
      form: {
        arr: []
      },
      labelWidth: '150px', // 宽度
      listLoading: false,
      options: options,
      rules: {
        base_type: [{ required: true, message: '', trigger: 'blur' }],
        base_brand: [{ required: true, message: '', trigger: 'blur' }],
        base_class: [{ required: true, message: '', trigger: 'blur' }],
        base_model: [{ required: true, message: '', trigger: 'blur' }],
        base_color: [{ required: true, message: '', trigger: 'blur' }]
      },
      inputDoms: ''
    }
  },
  created() {
    this.add()
    this.$nextTick(() => {
      this.initInputDOM()
    })
  },
  methods: {
    test() {
      console.log('fromListfromListfromListfromList', this.form.arr)
    },
    add() {
      this.form.arr.push({
        base_type: '',
        base_brand: '',
        base_class: '',
        base_model: '',
        base_color: '',
        base_range: '',
        base_material: '',
        base_search: '',
        base_price: '',
        base_buyingprice: '',
        base_brokerage: ''
      })
      this.$nextTick(() => {
        this.initInputDOM()
      })
    },
    initInputDOM() {
      // 获取id为table-form下的所有input 框
      const inputDoms = document.querySelectorAll('.el-input__inner')
      // 遍历这个input框给他们一个标识
      inputDoms.forEach((item, index) => {
        item.setAttribute('data-index', index)
      })
      this.inputDoms = inputDoms
    },
    // 回车事件
    nextFocus(event, row) {
      const index = event.target.getAttribute('data-index')
      const nextIndex = parseInt(index) + 1
      const length = this.inputDoms.length
      if (nextIndex < length) {
        this.inputDoms[nextIndex].focus()
      } else {
        this.inputDoms[0].focus()
      }
    },
    //
    del(index) {
      this.form.arr.splice(index, 1)
    },
    save() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('通过')
          console.log(this.form.arr)
        }
      })
    },
    copy(index, row) {
      console.log(index, row)
      // 不添加这行 会导致数据联动修改（index也被添加进去了）
      const rowCopy = JSON.parse(JSON.stringify(row))
      this.form.arr.splice(index, 0, rowCopy)
      console.log(this.form.arr)
    }
  }
}
</script>

<style scoped>
.heightFifty{
  height: 50px;
}
.heightFifty th{
  width: 100px;
}
.el-form-item {
  margin-bottom:0px
}
.footerButton{
  margin: 20px auto;
  width: 100%;
  text-align: center;
}
.colorRed{
    color: red;
}
</style>