Блог

Главная - Вопросы по программированию - Как генерировать номера строк (1, 2, 3, …) при привязке пользовательской таблицы к массиву?

Как генерировать номера строк (1, 2, 3, …) при привязке пользовательской таблицы к массиву?

#javascript #arrays #vue.js

Вопрос:

У нас есть Vue.js проект с пользовательской таблицей, привязанной к массиву. Это выглядит следующим образом:

введите описание изображения здесь

Ключевая часть HTML-кода выглядит следующим образом:

 <InfiniteScroll ref="scroller" :disable="finished" @load="onLoad">
  <swipeable-table
    v-if="waitingList.length"
    :headers="headers"
    :items="waitingList"
    :loading="loading"
    custom-width
    outerBorder
  >
    <template slot="rows" slot-scope="{ item: booking }">
      <tr>
        <td>{{ 0 }}</td>
        <td></td>
        <td></td>
        <td>{{ fullName(booking.user) }}</td>
        <td>{{ unitName(booking.search_by) }}</td>
        ...
      </tr>
    </template>
  </swipeable-table>
  ...
</InfiniteScroll>

Это waitingList массив объектов.

Часть кода JavaScript выглядит следующим образом:

 methods: {
  fullName(user) {
    return fullName.by(user, null, true)
  },
  unitName(unit) {
    return unit?.name ?? ''
  },
  ...

Таблица прокручивается, то есть она показывает 30 элементов в начале и после прокрутки следующих 30 элементов (30 30=60) и так далее.

Массив объектов выглядит следующим образом:

введите описание изображения здесь

введите описание изображения здесь

Есть ли способ использовать какой-либо метод JavaScript для его достижения? Если нет, то как я могу это сделать?

Комментарии:

1. Я вижу, что область действия слота=»{ товар: бронирование }» может содержать другие данные. Обычно у него есть что-то вроде индекса (в таблице данных vuetify он есть) . Попробуйте проверить данные, предоставляемые областью действия слота, возможно, есть данные индекса, которые вы могли бы использовать

2. Я только что обновил свой пост. Пожалуйста, взгляните на это.

3. Вы можете использовать booking.id

4. пробовать slot-scope="{ item: booking, index:index }"

5. @Laxmikant Dange Да! Пожалуйста, отвечайте на мой вопрос обычным способом, и я отмечу его как правильный. Большое спасибо!

Ответ №1:

вы можете добавить индекс так же, как элемент в шаблоне.

 <template slot="rows" slot-scope="{ item: booking,index:index }">
  <tr>
    <td>{{ index }}</td>
    <td></td>
    <td></td>
    <td>{{ fullName(booking.user) }}</td>
    <td>{{ unitName(booking.search_by) }}</td>
    ...
  </tr>
</template>
Метки: , , ,