Установка фокуса элемента массива строк el-input и el-select в vue.js? - PullRequest
0 голосов
/ 01 января 2019

У меня проблема с установкой массива строки фокуса по элементам. Я не понимаю, почему я не могу установить фокус, как показано в коде ниже и на рисунке.Я щелкаю по строке ячейки по самому элементу.Пожалуйста, порекомендуйте и решите мою проблему.

link to my image description here

//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 не работает.

1 Ответ

0 голосов
/ 02 января 2019

v-el был заменен / объединен с ref в vue2, попробуйте $ refs вместо $ els

https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...