vuej의 커스텀 테이블 컴포넌트에서 슬롯/스코프 슬롯을 사용하는 방법

vuej의 커스텀 테이블 컴포넌트에서 슬롯/스코프 슬롯을 사용하는 방법

컴포넌트를 작성한 vue-good-table을 사용하고 있습니다.

Table.vue

        <vue-good-table
                    :columns="fields"
                    :pagination-options="paginationOptions"
                    :rows="items"
                    :search-options="{ enabled: true }"
                    :select-options="{ enabled: multiSelect }"
                    @on-cell-click="onCellClick"
                    @on-row-click="onRowClick"
                    @on-selected-rows-change="selectionChanged"
                    styleClass="vgt-table condensed striped"
                    v-else
                >
                    <template slot="table-row" slot-scope="props">
                        <span v-else-if="props.column.field === 'viewActivity'">
                        <v-btn small>View Activity</v-btn>
                    </span>
                    <span v-else-if="props.column.field === 'remarks'">
                        <v-text-field
                            filled
                            rounded
                            dense
                            placeholder="Add Remarks"
                            v-model="props.row.remarks"
                            single-line
                        ></v-text-field>
                    </span>
                        <span v-else>{{props.formattedRow[props.column.field]}}</span>
                    </template>
            </vue-good-table>

사용자 지정 슬롯에 조건이 너무 많습니다.저는 이 표를 사용하고 있는 페이지에 이러한 조건을 기입하고 싶습니다.vue 컴포넌트내가 어떻게 그럴 수 있을까?아마도 현재 알 수 없는 스코프 슬롯 같은 것이 있을 것입니다.

현재 vue good table에는 contributor가 거의 없기 때문에 vuej의 오래된 구문을 사용하고 있기 때문에 구문에 문제가 있었습니다.

Solution:

<vue-good-table
        :columns="fields"
        :pagination-options="paginationOptions"
        :rows="items"
        :search-options="{ enabled: search }"
        :select-options="{ enabled: multiSelect }"
        @on-cell-click="onCellClick"
        @on-row-click="onRowClick"
        @on-selected-rows-change="selectionChanged"
        styleClass="vgt-table condensed striped"
    >
        <template slot="table-row" slot-scope="props">
            <slot :props="props" />
            <span v-if="props.column.type === 'geo_image_capture' || props.column.type === 'image'">
</span>
            <span v-else>
                <a
                    :href="props.formattedRow[props.column.field]"
                    target="_blank"
                >{{props.formattedRow[props.column.field]}}</a>
            </span>
        </template>
    </vue-good-table>

언급URL : https://stackoverflow.com/questions/60093559/how-to-use-slots-scoped-slots-in-a-custom-table-component-in-vuejs