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

我在页面中放置了一个q表来显示我的数据。这是正确的工作。我想在第一列中添加一个href，在最后一列中添加另一个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>

.....
栏目：[
{
姓名：'头衔'，
要求：正确，
标签：“标题”，
对齐：“左”，
字段：row=>row.title，
可排序：是的，
格式：val=>“”//这不起作用
},
{
名称：'类别'，
标签：'类别'，
字段：'类别'，
可排序：正确
},
{
名称：'付款'，
标签：“付款”，
字段：“付款”
},
{
名称：“行动”，
标签：“编辑”，
字段：'键'，
格式：val=>“”//这不起作用
}
]
.....

这个答案假设类星体1.0.0-rc4。对于早期版本，它可能看起来有点不同，但关键是您需要使用作用域插槽

有一个称为

body cell-[name]

的作用域插槽，可用于呈现非纯文本的内容。此处的

[name]

部分应与

列定义中相应列的
名称
匹配



我使用的
v-slot
假设Vue 2.6.0+，对于早期版本，您将使用
slot
和
slot scope

您还没有解释URL的UUID部分来自何处，所以我没有在上面的代码中包含它。我可以想象它包含在行数据的某个地方，因此在实践中您需要类似于
：href=“'#/offer/'+encodeURIComponent（cellProperties.row.uuid）”

如果您使用的是路由库（如Vue Router），那么除了直接在
标记中构建URL之外，还有其他选择。在将手工制作的URL散布到整个应用程序代码之前，您可能希望进行进一步的调查。然而，无论你如何实现你的链接，作用域插槽的使用很可能仍然存在。
这个答案假设了Quasar 1.0.0-rc4。对于早期版本，它可能看起来有点不同，但关键是您需要使用作用域插槽

有一个称为
body cell-[name]
的作用域插槽，可用于呈现非纯文本的内容。此处的
[name]
部分应与
列定义中相应列的
名称
匹配



我使用的
v-slot
假设Vue 2.6.0+，对于早期版本，您将使用
slot
和
slot scope

您还没有解释URL的UUID部分来自何处，所以我没有在上面的代码中包含它。我可以想象它包含在行数据的某个地方，因此在实践中您需要类似于
：href=“'#/offer/'+encodeURIComponent（cellProperties.row.uuid）”

如果您使用的是路由库（如Vue Router），那么除了直接在
标记中构建URL之外，还有其他选择。在将手工制作的URL散布到整个应用程序代码之前，您可能希望进行进一步的调查。但是，无论您如何实现链接，作用域插槽的使用都可能保持不变。
使用：href。例如：

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

使用：href。例如：

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


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