如何使用Vuetables VUE.JS在每行上添加HREF鏈接

Question

盡管我閱讀了有關組件和插槽的信息，但我一直在使用VUEJS Vuetables，但我無法弄清楚如何在每一行上添加具有以下結構的鏈接：

<td class="text-center">
<a href="{{ url('/order/'.$order->id) }}" class="btn btn-outline btn-danger btn-lg"><i class="fas fa-globe"></i>
</a>
</td>

1-我創建了一個列

        data: {
            columns: [
                {
                    name: '__component:gcp-actions',
                    title: 'Actions',
                    titleClass: 'text-center',
                    dataClass: 'text-center'
                }

2-我創建了gcpaction組件：

<template>
    <div class="custom-actions">
        <a v-bind:href="rowData.view" v-if="show" class="btn btn-flat bg-green btn-sm"><i
                class="glyphicon glyphicon-zoom-in"></i></a>
        <button class="btn btn-flat bg-red btn-sm" @click="itemAction('delete-item', rowData, rowIndex)"><i
                class="glyphicon glyphicon-trash"></i></button>
    </div>
</template>

我嘗試使用<a>和<button>

3-我在表中注冊了組件：

import GcpActions from './GcpActions'
Vue.component('gcp-actions', GcpActions)

4-當我渲染時，我可以看到整個表格，但是看不到表格中的組件：

<vtable url="orders/filter" :columns="columns" :filters="filters"></vtable>

任何幫助表示贊賞。

Answer 1

您嘗試過作用域插槽嗎？

<span slot="columnName" slot-scope="props">
    <a href="/profiles/{{columnName.if}}"></a>
</span>