CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
BeaST 30
BeaST 30

Reputation: 744

How to use slots / scoped-slots in a custom table component in vuejs?

I am using vue-good-table for which I have created a component.

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>

Custom slot is having too many conditions here. I want to write these conditions in a page where I am using this Table.vue component. How can I do that? Perhaps with scoped slots or something which I am unable to figure out currently

Upvotes: 4

Views: 4462

Answers (1)

BeaST 30
BeaST 30

Reputation: 744

I was facing problem in the syntax as vue good table uses old syntax of vuejs as it doesn't have much contributors now.

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>

Upvotes: 2

Related Questions