如何将 href 添加到 q 表（类星体数据表）？答案

【问题标题】：How can I add an href to a q-table (Quasar Data Table)?如何将 href 添加到 q 表（类星体数据表）？
【发布时间】：2019-10-24 03:51:17
【问题描述】：

我在我的页面中放置了一个 q-table 来显示我的数据。这是正常工作。我想在第一列中放置一个 href，在最后一列中放置另一个。您应该可以单击它们转到其他页面以分别显示详细信息行和编辑行。

标题：转到页面/#/offer/uuid

编辑：转到页面/#/account/offers/edit/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>

【问题讨论】：

您使用的是哪个版本的 Quasar？我认为对您的问题的简短回答是您需要使用作用域插槽而不是 format 函数。

标签： vue.js quasar-framework

【解决方案1】：

使用 :href。例如：

<a :href="'/app/product/'+props.row.productId">{{ props.row.name }}</a>

【讨论】：

【解决方案2】：

这个答案假设 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。

你没有解释你的 URL 的 UUID 部分来自哪里，所以我没有将它包含在上面的代码中。我想它包含在行数据的某个地方，所以在实践中你需要像:href="'#/offer/' + encodeURIComponent(cellProperties.row.uuid)" 这样的东西。

如果您正在使用诸如 Vue Router 之类的路由库，那么还有其他替代方法可以直接在 <a> 标记中构建 URL。在将手工制作的 URL 洒在整个应用程序代码中之前，您可能希望进一步调查。但是，无论您如何实现链接，都可能会继续使用作用域插槽。

【讨论】：