如何添加到 Vuikit (Vuejs) 表的链接？答案

【问题标题】：How to add a link to a Vuikit (Vuejs) table?如何添加到 Vuikit (Vuejs) 表的链接？
【发布时间】：2018-10-23 08:29:58
【问题描述】：

我已经尝试了一切来让它工作，我正在考虑删除 Vuikit...

我只是试图将一些动态数据传递给组件，并使用这些数据创建一个新的 HREF，同时只显示一个 LINK 可点击的文本元素:)

这是我的桌子：

 <vk-table v-bind:data="paginatedData" narrowed>
            <vk-table-column-select></vk-table-column-select>
            <vk-table-column title="Vendor Name" cell="name"></vk-table-column>

            <vk-table-column title="Link">
                <a v-bind:href="policyUrl"></a>
            </vk-table-column>

            <vk-table-column title="Link2">
                <p cell="policyUrl"></p>
            </vk-table-column>

</vk-table>

剩下的最后两列是为了展示我所做的一些尝试。问题是使用 Vuikit，循环和使用 v-for 不可用，因此必须使用提供的组件...

请帮忙！

【问题讨论】：

标签： vue.js getuikit vuikit

【解决方案1】：

我得到了一位贡献者的帮助。

HTML

<div id="app" class="uk-padding">

  <vk-table :data="paginatedData" narrowed>
    <vk-table-column-select></vk-table-column-select>
    <vk-table-column title="Vendor Name" cell="name"></vk-table-column>

    <vk-table-column title="Link">
      <a href="mystaticurl">Static URL</a>
    </vk-table-column>

    <vk-table-column title="Link">
      <a slot-scope="{ row }" :href="row.link">{{ row.link }}</a>
    </vk-table-column>

  </vk-table>

</div>

new Vue({
  el: '#app',
  data: () => ({
    paginatedData: [
      {name: 'row1', link: 'link1'},
      {name: 'row2', link: 'link2'}
    ]
  })
})

【讨论】：