将 table 中的一行链接到 url

Question

我正在开发实现 vue-tables-2. I have a working example here 的 vue 组件。我想要做的是 link 编辑 href url 到整行，而不是仅编辑单元格。使用 vanilla javascript，我尝试使用 mounted 挂钩 (this.$el) 访问虚拟 dom 并将行包装在 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

您可以收听的 table 组件 emits a row-click event。它为您提供了被单击的行。我建议，与其尝试使用 link，不如监听事件并导航到所需位置。

这是更新后的模板。

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

并且在方法中：

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

Example.