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

Question

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

PHP Controller :

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

如果我对您的问题的理解正确，您希望显示一个重定向到用户版本表单的链接，通过一个类似于 /user/1/edit 的 url .

• 首先，检查 Laravels 返回的内容

您可能想要使用 dd(User::latest()->get());为了那个原因。默认情况下，您应该获得 id 以及其他信息，除非您明确 $guarded他们。

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

如果你勾选this link ，它向您展示了一个表格示例，该表格似乎以特定样式显示“年龄”列，默认情况下显示其余列。这里有趣的是，它向您展示了您的每个用户都可以通过 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>