将表中的行链接到 url [英] Linking a row in a table to a url

问题描述

我正在开发一个实现 vue-tables-2.我有一个工作示例这里.我想要做的是将编辑 href url 链接到整行，而不仅仅是编辑单元格.使用 vanilla javascript，我尝试使用 mounted 钩子 (this.$el) 来访问虚拟 dom 并将行包装在一个 href 中并隐藏编辑列，但它感觉有点像黑客.关于如何实现这一点有什么建议吗?

 <模板><div class="col-md-8 col-md-offset-2"><div id="人"><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>

</模板></v-client-table>

</模板><脚本>从'vue-tables-2'导入{ServerTable、ClientTable、Event}；从'vue'导入Vue；从 'axios' 导入 axios；导出默认{方法: {功能(ID){返回编辑/你好-"+ id}},数据() {返回 {列:['edit', 'id','name','age'],表数据:[{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"}]};}}

解决方案

表格组件 发出您可以收听的 row-click 事件.它为您提供了被点击的行.我建议您不要尝试使用链接，而是监听事件并导航到您想要的位置.

这是更新后的模板.

在方法中:

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

示例.

I am working on a vue component that implements vue-tables-2. I have a working example here. What I am trying to do is link the edit href url to the entire row as opposed to only the edit cell. Using vanilla javascript, I tried using the mounted hook (this.$el) to access the virtual dom and wrap the row in an href and hide the edit column although, it feels like a bit of a hack. Any suggestions on how to accomplish this?

  <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>

解决方案

The table component emits a row-click event that you can listen to. It gives you the row that was clicked. I suggest, instead of trying to use a link, you listen for the event and navigate where you want.

Here is the updated template.

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

And in the method:

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

Example.

这篇关于将表中的行链接到 url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！