3

我是 VueJS 的新手，并决定使用一个名为 Vue-good-table 的库（此处的文档：https : //xaksis.github.io/vue-good-table/）在我的 laravel 项目中显示数据表，而不是通常使用 jQuery 的 Yajra 数据表。我已经能够从后端显示我的数据，但现在我正在努力在自定义“操作”列中包含一个编辑按钮。我尝试了很多方法，但没有一个成功。我需要一种在按钮单击时重定向到编辑页面的方法，所以我的猜测是我需要在我的 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

我缺少什么让它工作？先感谢您。

4

1 回答 1

1

我正在努力在自定义“操作”列中包含一个编辑按钮。我尝试了很多方法，但没有一个成功。我需要一种在按钮单击时重定向到编辑页面的方法

如果我正确理解了您的问题，您希望通过一个看起来像/user/1/edit.

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

您可能想dd(User::latest()->get());为此而努力。默认情况下，您应该将 id 与其他信息一起获取，除非您明确说明$guarded它们。

  • 然后，使用 vue-good-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>
于 2021-01-02T20:42:42.140 回答