Как добавить кнопку в каждой строке таблицы?- VueJS 2.5 - хороший стол - PullRequest
Новая
       13

Как добавить кнопку в каждой строке таблицы?- VueJS 2.5 - хороший стол

0 голосов
/ 25 февраля 2019

Я пытаюсь добавить кнопку, чтобы заменить слова «Просмотр сведений» в ячейке таблицы для каждой строки.Я пытался реализовать шаблон, и каждый раз, когда я сохраняю изменения, таблица не возвращает результатов, что говорит о том, что что-то не работает.

Вот как выглядит таблица: enter image description here

Вот мой код: 

  <vue-good-table
                :columns="columns"
                :rows="rows"
                :globalSearch="true"
                :paginate="true"
                :responsive="true"
                :lineNumbers="false"
                class="styled"
                styleClass="table">
                 <template slot="table-row" slot-scope="props">
                      <span v-if="props.column.field == 'Details'">
                        <button type="button" class="btn btn-primary">
                        View Details
                        </button>
                      </span>
                      <span v-else>
                          {{props.formattedRow[props.column.field]}}
                      </span>
                  </template>
              </vue-good-table>

.,,. 

  columns: [
        {
          label: "Date",
          field: "date",
          filterable: true
        },
        {
          label: "Event",
          field: "event",
          filterable: true
        },
        {
          label: "Details",
          field: "details",
          filterable: true
        }
      ],
      rows: [
        {
          event: "Thanksgiving Barrel Events",
          details: "View Event",
          date: "11/28/2018 at 6:34 PM"
        },
        {
          event: "Christmas Barrel Events",
          details: "View Event",
          date: "12/25/2018 at 6:34 PM"
        },

Error message

1 Ответ

0 голосов
/ 25 февраля 2019

Вы все сделали правильно, за исключением того, что вы оставили опечатку, в которой вы проверяете, является ли поле столбца «Подробно», а его «детали» (строчные буквы).

со строками, «Детали» -не равно «деталям» в javascript, так как строки чувствительны к регистру, никогда не забывайте об этом.

Таким образом, рабочий код выглядит так: 

<vue-good-table
  :columns="columns"
  :rows="rows"
  :globalSearch="true"
  :paginate="true"
  :responsive="true"
  :lineNumbers="false"
  class="styled"
  styleClass="table">
  <template slot="table-row" slot-scope="props">
    <span v-if="props.column.field == 'details'">
      <button type="button" class="btn btn-primary">
      View Details
      </button>
    </span>
    <span v-else>
        {{props.formattedRow[props.column.field]}}
    </span>
  </template>
</vue-good-table>

Вот рабочий код: https://codesandbox.io/s/nnpqpn6ll4?fontsize=14

...