Question

您好我一直在寻找这个问题的简单答案，但似乎无法找到一个我的vue应用程序的spatie表插件，看起来像这样。

                <table-component id="table1" :data="[
                                         { firstName: 'John', birthday: '04/10/1940', songs: 72 },
                                         { firstName: 'Paul', birthday: '18/06/1942', songs: 70 },
                                         { firstName: 'George', birthday: '25/02/1943', songs: 22 },
                                         { firstName: 'Ringo', birthday: '07/07/1940', songs: 2 },
                                         ]" sort-by="songs" sort-order="asc">
                    <table-column show="firstName" label="First name"></table-column>
                    <table-column show="songs" label="Songs" data-type="numeric"></table-column>
                    <table-column show="birthday" label="Birthday" :filterable="false" data-type="date:DD/MM/YYYY"></table-column>
                </table-component>

我想创建一种方法，当您单击表格行时，它会将我的路由器推送到另一个页面并将表格行信息传递到下一个路由器页面

this.$router.push('/analytic-one');

感谢您的任何帮助或建议。

Answer 1

有几种方法可以解决这个问题。

但是对于点击本身，在Documentation for spatie table组件中，该组件在询问此问题后已更新。

表组件当前发出一个自定义事件：

@rowClick：单击一行时会触发。接收行数据作为事件有效负载。

告诉我们行数据是在有效载荷中返回的，所以我们可以

<table-component @rowClick="myHandlerMethod" ....

在我们的方法对象

中

methods: {
    myHandlerMethod: function (clickedItem) {
        console.log(clickedItem)
    }
}

要将数据发送到新页面，您可以通过多种方式解决此问题。

您可以在单击表格行后使用vuex临时存储表格信息，然后将路由器推送到新页面并再次从vuex状态获取数据。

或者您可以使用$router.push('route?artistId=' + clickedItem.id)之类的内容，然后在用户登陆新页面时再次执行ajax调用以获取该列的数据，这是干净的方法。（这是伪代码，请查看vue路由器以了解将变量绑定到路由的正确方法。）这假设您的数据集中有id。

或者您可以选择使用模态，然后您可以执行类似的操作点击处理程序中的this.selectedItem = clickedItem。

希望能给你一个大方向。

将事件放在vuejs中的表行上

1 个答案: