vuejs2 - 在 vue.js 中设置 el-input 和 el-select 行数组元素的焦点？

问题描述

我有按元素设置焦点行数组的问题我不知道为什么我不能像下面的代码和图片那样设置焦点。我按元素本身单击单元格行。请推荐并解决我的问题。

链接到我的图片描述这里

//Template
<!-- Qty -->
    <el-table-column
      v-if="showActiveHeader('qty')"
      prop="qty"
      label="Qty"
    >
      <template slot-scope="scope">
        <el-form-item
          v-if="scope.$index === activeRowIndex"
          :key="scope.$index + '.qty'"
          :prop="'items.' + scope.$index + '.qty'"
          :rules="rules.qty"
          class="form-item"
          style="margin:0"
        >
            <el-input-number
              ref="Qty"
              v-model="scope.row.qty"
              :precision="decimalNumber"
              :controls="false"
              :size="formSize"
              :min="minQty"
              style="width:100%"
              @change="rowChange(scope.row, 'Qty')"
            />
          </el-tooltip>
        </el-form-item>
        <span v-else>
          {{ scope.row.qty | number }}
        </span>
      </template>
    </el-table-column>

    <!-- Unit -->
    <el-table-column
      v-if="showActiveHeader('unit')"
      prop="unitId"
      label="Unit"
    >
      <template slot-scope="scope">
        <el-form-item
          v-if="scope.$index === activeRowIndex"
          :key="scope.$index + '.unitId'"
          :prop="'items.' + scope.$index + '.unitId'"
          :rules="rules.unitId"
          class="form-item"
          style="margin:0"
        >
          <el-select
            ref="Unit"
            v-model="scope.row.unitId"
            automatic-dropdown
            :size="formSize"
            filterable
            @change="rowChange(scope.row, 'Unit')"
          >
            <el-option
              v-for="doc in scope.row.units"
              :key="doc.unitId"
              :label="doc.unitDoc.name"
              :value="doc.unitId"
              :disabled="doc.disabled"
            />
          </el-select>
        </el-form-item>
        <span v-else>
          {{ scope.row.unitLabel }}
        </span>
      </template>
    </el-table-column>

 //vue js
   handleCellClick(row, column) {

   this.activeRowIndex = this.form.items.indexOf(row)

     this.$nextTick(() => {
       let label = column.label
       this.$refs[label].focus()
     })
   }

我尝试this.$els.nameInput.focus();了我可以在网上找到的东西来定位焦点，但this.$els没有奏效。

标签： vuejs2element-ui

vuejs2 - 在 vue.js 中设置 el-input 和 el-select 行数组元素的焦点？

问题描述

解决方案

推荐阅读