Как я могу добавить href в q-таблицу (Quasar Data Table)?

Question

Я разместил на своей странице q-таблицу, чтобы показать мои данные. это работает правильно. Я хочу поставить Href в первом столбце, а другой в последнем столбце. Вы можете нажать на них, чтобы перейти на другие страницы для отображения подробностей строки и редактирования строки соответственно.

Заголовок: перейти на страницу / # / предложение / uuid

Изменить: перейти на страницу / # / аккаунт / предложения / редактировать / uuid

    <template>
      <q-page>
        <div class="row justify-center">
            <q-table
              :data="data"
              :columns="columns"
              row-key="id"
              selection="single"
              :selected.sync="selected"
              :filter="filter"
              :loading="loading"
            >
            </q-table>
          </div>
        </div>
      </q-page>
    </template>

<script>
.....
columns: [
        {
          name: 'title',
          required: true,
          label: 'Title',
          align: 'left',
          field: row => row.title,
          sortable: true,
          format: val => '<a href="/offer/">' + val + '</a>' //this is not work
        },
        {
          name: 'category',
          label: 'Category',
          field: 'category',
          sortable: true
        },
        {
          name: 'payment',
          label: 'Payment',
          field: 'payment'
        },
        {
          name: 'action',
          label: 'Edit',
          field: 'key',
          format: val => '<a href="/account/offers/edit/">' + val + '</a>' //this is not work
        }
      ]
.....
</script>

Answer 1

Этот ответ предполагает использование Quasar 1.0.0-rc4. Для более ранних версий это может выглядеть немного иначе, но суть в том, что вам нужно использовать слоты с ограниченным доступом.

Существуют слоты с областью действия, называемые body-cell-[name], которые можно использовать для отображения содержимого, которое не является простым текстом. Здесь часть [name] должна соответствовать name для соответствующего столбца в вашем определении columns.

<q-table ...>
    <template v-slot:body-cell-title="cellProperties">
        <q-td :props="cellProperties">
            <a href="#/offer/">{{ cellProperties.value }}</a>
        </q-td>
    </template>
    <template v-slot:body-cell-action="cellProperties">
        <q-td :props="cellProperties">
            <a href="#/account/offers/edit/">{{ cellProperties.value }}</a>
        </q-td>
    </template>
</q-table>

Мое использование v-slot предполагает Vue 2.6.0+, для более ранних версий вы бы использовали slot и slot-scope вместо.

Вы не объяснили, откуда берется UUID-часть вашего URL, поэтому я не включил это в приведенный выше код. Я бы предположил, что он включен где-то в строке данных, поэтому на практике вам понадобится что-то вроде :href="'#/offer/' + encodeURIComponent(cellProperties.row.uuid)".

Если вы используете библиотеку маршрутизации, например Vue Router, есть альтернативы созданию URL-адресов непосредственно в тегах <a>. Возможно, вы захотите продолжить расследование, прежде чем разбрасывать вручную созданные URL-адреса по всему коду приложения. Однако использование слотов с определенной областью действия, вероятно, останется независимо от того, как вы реализуете свои ссылки.