Задать одному элементу одну ширину, другому другую

<template>
  <div>
    <table class="inspection-data-grid">
      <thead v-if="!readOnly">
        <th class="w-1/5">
          {{ $t("dictionary.normatives") }}
        </th>
        <th
          v-if="hasLastIndicators"
          class="w-1/5"
        >
          {{ $t("dictionary.Предыдущая попытка") }}
        </th>
        <th class="w-full">
          {{ $t("dictionary.Текущая попытка") }}
        </th>
      </thead>
      <thead v-else>
        <th
          class="w-1/5"
        >
          {{ $t("dictionary.normatives") }}
        </th>
        <th>
          {{ `${$t('dictionary.bodycheck')}-1` }}
        </th>
        <th
          v-if="lastVersion >= 1"
        >
          {{ `${$t('dictionary.bodycheck')}-2` }}
        </th>
        <th
          v-if="lastVersion >= 2"
        >
          {{ `${$t('dictionary.bodycheck')}-3` }}
        </th>
      </thead>
      <tbody>
        <tr
          v-for="(indicator, i) in indicators"
          :key="i"
        >
          <td>
            {{ indicator !== '' ? $t(`dictionary.${indicator}`) : indicator }}
          </td>
          <td
            v-for="(data, index) in visibleDataGridData"
            :key="index"
          >
            <div
              v-for="(item, ind) in data"
              :key="ind"
              :class="[ currentAttempIndex === index && 'w-20' ]"
            >
              <p
                v-if="(item.indicator === indicator && currentAttempIndex !== index) || (item.indicator === indicator && readOnly)"
              >
                {{ getValue(item) }}
              </p>
              <a-text-field
                v-else-if="(item.indicator === indicator
                  && currentAttempIndex === index && indicator !== '' && item.availableValues === undefined) && !readOnly"
                class="items-center text-center"
                type="number"
                :dom-id="ind"
                :model-value="item.value"
                :error-input="item.error"
                :pre-selection-value="item.preSelectionValue ?? null"
                @update="args => updateIndicatorsData(item, indicator, args)"
                @blur="item.preSelectionValue !== null && item.value === null ? item.value = item.preSelectionValue : ''"
                @keydown.enter="focusToNextInput(ind)"
              />
              <div
                v-else-if="(item.indicator === indicator && item.availableValues !== undefined) && !readOnly"
              >
                <div class="flex mb-2">
                  <div
                    v-for="availableValue in item.availableValues"
                    :key="availableValue"
                  >
                    <text-chip
                      :style="[ 'text-wrap: nowrap' ]"
                      :text="t(`dictionary.${availableValue}`)"
                      :selected="item.value === availableValue"
                      @select="updateIndicatorsData(item, indicator, availableValue, undefined)"
                    />
                  </div>
                </div>
                <a-text-field
                  v-if="item.availableValues[1] === item.value"
                  :placeholder="t('dictionary.напишитеКомментарий')"
                  @update="args => updateIndicatorsData(item, indicator, item.value, args)"
                />
              </div>
              <div
                v-if="(indicator === '' && currentAttempIndex === index && data.length - 1 === ind) && !readOnly"
              >
                <a-button
                  class="mt-7 light_btn text-right"
                  :style="[ 'display: inline-flex', 'width: max-content' ]"
                  :light="true"
                >
                  {{ $t("dictionary.dictateData") }}
                  <Microphone class="ml-2" />
                </a-button>
                <div
                  class="mt-7 flex"
                  :style="[ 'width: fit-content' ]"
                >
                  <a-button
                    class="h-[35px]"
                    @click="sendAcceptRefuseAction('accept')"
                  >
                    {{ $t("dictionary.allow") }}
                  </a-button>
                  <a-button
                    :style="[ 'min-width: 160px' ]"
                    class="h-[35px] ml-3"
                    @click="sendAcceptRefuseAction('refuse')"
                  >
                    {{ $t("dictionary.denyAccess") }}
                  </a-button>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

имеется два инпута в html(в данном случае a-text-field) Один должен быть w-20, второй w-90. При использование v-for пишется ширина w-20. пытался для 2 a-text-field сделать ширину необходимую, но не получается. Обведено в кружок, какой имею ввиду Как возможно осуществить это? введите сюда описание изображения


Ответы (0 шт):