뷰 사이드 컴포넌트 내의 vue-good 테이블에 커스텀 콘텐츠를 표시하려면 어떻게 해야 합니까?

뷰 사이드 컴포넌트 내의 vue-good 테이블에 커스텀 콘텐츠를 표시하려면 어떻게 해야 합니까?

저는 VueJs에 처음 와서 jQuery를 사용하는 일반적인 Yajra 데이터 테이블 대신 Vue-good-table(여기서 doc: https://xaksis.github.io/vue-good-table/)이라는 라이브러리를 사용하여 데이터 테이블을 내 라라벨 프로젝트에 표시하기로 결정했습니다.백엔드에서 데이터를 표시할 수 있었지만 커스텀 "액션" 열에 편집 버튼을 포함시키는 데 어려움을 겪고 있습니다.나는 여러 가지 방법을 시도했지만 성공하지 못했다.버튼을 클릭하기만 하면 편집 페이지로 리다이렉트 할 수 있는 방법이 필요하기 때문에 내 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

작동하려면 무엇이 부족합니까?잘 부탁드립니다.

커스텀 "actions" 열에 편집 버튼을 포함시키는 데 어려움을 겪고 있습니다.나는 여러 가지 방법을 시도했지만 성공하지 못했다.버튼을 클릭하기만 하면 편집 페이지로 리디렉션할 수 있는 방법이 필요합니다.

질문을 올바르게 이해한 경우 다음과 같은 URL을 통해 사용자 에디션으로 리디렉션되는 링크를 표시합니다./user/1/edit.

• 먼저, 라라벨스가 무엇을 반환하는지 확인합니다.

같이 가셔도 됩니다.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>

언급URL : https://stackoverflow.com/questions/65532378/how-can-i-display-custom-content-in-vue-good-table-within-my-view-side-component