如何在 vuejs 的自定义表格组件中使用插槽/作用域插槽？答案

【问题标题】：How to use slots / scoped-slots in a custom table component in vuejs?如何在 vuejs 的自定义表格组件中使用插槽/作用域插槽？
【发布时间】：2020-02-06 11:07:20
【问题描述】：

我正在使用已为其创建组件的 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>

自定义广告位的条件过多。我想在使用这个 Table.vue 组件的页面中编写这些条件。我怎样才能做到这一点？也许有作用域插槽或我目前无法弄清楚的东西

【问题讨论】：

你解决了这个问题吗？
@NikolayTraykov 是的。我已经评论了我的答案。谢谢提醒：D

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

我遇到了语法问题，因为 vue good table 使用 vuejs 的旧语法，因为它现在没有太多贡献者。

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>

【讨论】：