테이블의 행을 URL에 링크

테이블의 행을 URL에 링크

vue-table-2를 구현하는 vue 컴포넌트를 작업하고 있습니다.여기 작업 예가 있습니다.편집 셀이 아닌 행 전체에 편집 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>

테이블 구성 요소는 청취할 수 있는 이벤트를 내보냅니다.클릭하면 클릭한 행이 표시됩니다.링크를 사용하지 말고 이벤트를 듣고 원하는 위치로 이동할 것을 권장합니다.

업데이트된 템플릿입니다.

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

그리고 그 방법:

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

예.

언급URL : https://stackoverflow.com/questions/47378673/linking-a-row-in-a-table-to-a-url