如何在Vuikit（Vue.js）表格中添加可点击链接？

我太懂你折腾到想换框架的心情了！Vuikit的组件确实有自己的规则，不能直接用v-for，不过它提供了作用域插槽来处理这种每行动态数据的需求，刚好能解决你的问题。

先分析下你之前的尝试：

• 第一列的<a v-bind:href="policyUrl">没有关联当前行的数据，所以会拿全局的policyUrl，不是每行对应的链接
• 第二列的<p cell="policyUrl">只是单纯渲染字段值，没法转成可点击的链接

正确的实现方式 #

你需要在<vk-table-column>里使用slot-scope来获取当前行的数据源，然后动态绑定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">
    <template slot-scope="{ row }">
      <a :href="row.policyUrl">LINK</a>
    </template>
  </vk-table-column>
</vk-table>

关键说明 #

• slot-scope="{ row }"：Vuikit会把当前行的数据通过row对象传递给插槽，这样你就能访问到每行的policyUrl了
• :href="row.policyUrl"：动态绑定当前行的链接地址
• 标签内的LINK就是你要显示的可点击文本，替换掉原来空的<a>标签

这样就能实现你要的效果：每行显示一个可点击的“LINK”，点击后跳转到对应行的policyUrl地址，完全符合Vuikit的组件规则，不用移除框架~

内容的提问来源于stack exchange，提问作者dendog