テーブル内の行をURLにリンクする

Question

私はvue-tables-2を実装するvueコンポーネントを開発中です。私は作業例hereを持っています。私がやろうとしているのは、editセルだけではなく、行全体にedit href urlをリンクすることです。 vanilla javascriptを使用して、mountedフック（this.$el）を使用して仮想ドームにアクセスし、hrefの行をラップして編集列を隠そうとしましたが、ハックのような感じです。どのようにこれを達成するための任意の提案？

<template> 
    <div class="col-md-8 col-md-offset-2"> 
     <div id="people"> 
      <v-client-table :data="tableData" :columns="columns"> 
       <template slot="edit" slot-scope="props"> 
        <div> 
         <a class="fa fa-edit" :href="edit(props.row.id)">thing</a> 
        </div> 
       </template> 
      </v-client-table> 
     </div> 
    </div> 
</template> 

<script> 
    import {ServerTable, ClientTable, Event} from 'vue-tables-2'; 
    import Vue from 'vue'; 
    import axios from 'axios'; 

    export default { 
     methods: { 
      edit: function(id){ 
         return "edit/hello-" + id 
      } 
     }, 
     data() { 
      return { 
       columns: ['edit', 'id','name','age'], 
       tableData: [ 
        {id:1, name:"John",age:"20"}, 
        {id:2, name:"Jane",age:"24"}, 
        {id:3, name:"Susan",age:"16"}, 
        {id:4, name:"Chris",age:"55"}, 
        {id:5, name:"Dan",age:"40"} 
       ] 
      }; 
     } 
    } 
</script> 

Answer 1

あなたが聞くことができるテーブルコンポーネントemits a row-click eventです。クリックされた行が表示されます。私は、リンクを使用しようとするのではなく、イベントを聞き、あなたが望む場所をナビゲートすることを提案します。

ここに更新されたテンプレートがあります。

<v-client-table :data="tableData" :columns="columns" @row-click="onRowClick"> 

及び方法は：

onRowClick(event){ 
    window.location.href = `/edit/hello-${event.row.id}` 
} 

Example。