如何在我的视图端组件中显示 vue-good-table 中的自定义内容？

Question

我是 VueJS 的新手，决定使用一个名为 Vue-good-table 的库（此处文档：https://xaksis.github.io/vue-good-table/）在我的 laravel 项目，而不是通常使用 jQuery 的 Yajra 数据 tables。我已经能够从后端显示我的数据，但现在我正在努力在自定义“操作”列中包含一个编辑按钮。我尝试了很多方法，但 none 已经成功了。我需要一种在单击按钮时重定向到编辑页面的方法，所以我猜我需要在我的 php 视图文件中处理自定义列模板。这是使其更明确的代码：

Php 控制器：

public function index() {
    $users = json_encode(User::latest()->get());
    $userColumns = json_encode([
            [
                'label' => 'ID',
                'field' => 'id'
            ],
            [
                'label' => 'name',
                'field' => 'name'
            ],
            [
                'label' => 'Email',
                'field' => 'email'
            ],
            [
                'label' => 'Action',
                'field' => 'actions'
            ]
    ]);

    return view('admin.users.index', compact('users', 'userColumns'));
}

Vue 组件：

<template>
<div>
    <vue-good-table
        :columns="columns"
        :rows="rows"
        compactMode
    >
        <slot></slot>
    </vue-good-table>

</div>
</template>

<script>
   import { VueGoodTable } from 'vue-good-table';

   export default {
     props: ['rows', 'columns'],
     components : { VueGoodTable },
   }
</script>

<style scoped>

</style>

app.js 文件：

import Vue from 'vue';
import Datatables from './components/datatables';



const app = new Vue({
    el: '#app',

    components : {
        'bdfr-datatables' : Datatables,
    },
}

查看php 文件：

@section('content')
    <bdfr-datatables :rows="{{ $users }}" :columns="{{ $userColumns }}">
        <!-- wishing to display this part -->
        <template slot="table-row" slot-scope="props">
            <span v-if="props.column.field === 'actions'">
                <a href="#">Edit</a>
            </span>
            <span v-else>
                @{{props.formattedRow[props.column.field]}}
            </span>
         </template>
    </bdfr-datatables>
@endsection

我缺少什么让它工作？提前谢谢你。

Answer 1

I'm struggling to include an edit button in a custom "actions" column. I've tried many ways but none has been successful. I need a way to redirect to the edit page on button's click

如果我对你的问题的理解正确，你想显示一个 link 重定向到用户版本的表单，via 一个 url看起来像 /user/1/edit.

首先，检查一下 Laravels returns

您可能希望选择 dd(User::latest()->get());。默认情况下，您应该获取 id 以及其他信息，除非您明确 $guarded 它们。

然后，使用 vue-good-table 的模板系统调整您的解决方案

如果您选中 this link，它会向您展示一个 table 示例，该示例似乎以特定样式显示“年龄”列，其余部分默认显示。这里有趣的是，它向您展示了可以通过 props.row.

联系到您的每个用户

所以你需要做的是如下：

  <template slot="table-row" slot-scope="props">
    <span v-if="props.column.field == 'actions'">
      <a :href="`/user/${props.row.id}/edit`">Edit</a>
    </span>
    <span v-else>
      {{props.formattedRow[props.column.field]}}
    </span>
  </template>
</vue-good-table>

如何在我的视图端组件中显示 vue-good-table 中的自定义内容？

How can I display custom content in vue-good-table within my view-side component?

laravel

vuejs2

vue-good-table