Стиль редактирования ввода таблицы данных Primevue

Question

Вход редактирования Prime vue Datatable активен по умолчанию

Я заполняю таблицу данных для вставки значения для таблицы с вводом в таблицу, но ввод становится активным, когда я щелкаю по нему, как я могу сделать видимым по умолчанию.

это мой стол

<DataTable :value="lookupLabResults" editMode="cell">
              <template #header>{{selectedExamination.description}}</template>
              <Column header="Result" field="result">
                <template #editor="slotProps">
                  <InputText
                    autofocus
                    v-model="slotProps.data[slotProps.column.field]"
                    @click.stop="[onResultFocus(slotProps),toggle($event)]"
                  />
                </template>
              </Column>
              <Column header="Name" field="name" />
              <Column header="L/H" field />
              <Column header="Range from" field="referenceRangeFrom" />
              <Column header="Range to" field="referenceRangeTo" />
              <Column header="Range panic" field="referenceRangePanic" />
              <Column header="Unit" field="unit" />
              <Column header="Remark" field="remark">
                <template #editor="slotProps">
                  <InputText v-model="slotProps.data[slotProps.column.field]" />
                </template>
              </Column>
  </DataTable>

Answer 1

Я везде искал это и не смог найти комплексное решение. Мне нужно, чтобы его всегда можно было редактировать, если это были новые данные.

Что я сделал, чтобы решить эту проблему:

      <Column header="Remark" field="remark">
  <template #body="{data, field}">
    <InputText id="BODY" v-if="isNew" v-model="data[field]"/>

    <span v-else>{{data[field]}}</span>
  </template>

  <template #editor="{data, field}">
    <InputText id="EDITOR" v-model="data[field]"/>
  </template>
</Column>

Вам понадобятся оба, a и .
Вы можете проверить, взглянув на инспектора и посмотрев на значение идентификатора ввода, которое отображается, чтобы лучше понять его.

В основном, что произойдет:

Существующие данные:
Не редактируются: будут отображаться spanот
редактирования: покажет

Новые данные:
Не редактируются: будут показаны InputTextиз #body
Редактирование: покажет #editor