Question

我在页面中放置了一个q表以显示数据。这是正确的工作。我想在第一列中放置一个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>

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。

您还没有解释URL的UUID部分来自何处，因此我没有在上面的代码中包含它。我想它会包含在行数据中的某个位置，因此在实践中，您将需要使用:href="'#/offer/' + encodeURIComponent(cellProperties.row.uuid)"之类的东西。

如果您使用的是路由库（例如Vue Router），则可以使用其他方法直接在<a>标签内构建URL。您可能希望进一步研究，然后再在整个应用程序代码中添加手工制作的URL。但是，无论您如何实现链接，都有可能保留使用作用域插槽。

Answer 2

使用：href。例如：

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

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

2 个答案: