如何在vuejs中的自定义表组件中使用插槽/作用域插槽?

信标30

我使用的是为其创建了组件的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组件的页面中编写这些条件。我怎样才能做到这一点?可能是有范围的插槽或某些我目前无法弄清楚的东西

信标30

我在语法上遇到问题,因为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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在自定义组件中声明EventHandler类型的属性(插槽?)并为其分配功能

如何在Oracle中的SQL中使用REGEXP_SUBSTR用自定义消息替换空插槽

VueJS-将插槽和作用域插槽向下传递到子模板中的组件

Vuejs - 如何在作用域插槽中传达父子之间的更改

如何在AngularJS中的自定义指令*中使用自己的作用域*访问父作用域?

Vues-如何在渲染功能中使用v-for和作用域插槽

QT如何创建自定义插槽?

如何在v-data-iterator中获得自定义插槽?

如何在Alexa中以编程方式清除自定义插槽值?

如何影响插槽vuejs中的组件?

如何在父组件的插槽中使用v-for变量?

如何在预定义的插槽中使用Angular CDK DragDrop?

如何在预定义的插槽中使用Angular CDK DragDrop?

如何在HTML中的模板组件内部使用插槽

天蓝色 Web 应用程序中插槽的自定义域

Qt C ++自定义插槽不起作用

Qt:自定义插槽不起作用

如何定义不是列表的自定义插槽类型?

自定义类中的信号和插槽(包括PyQt QWidget)不起作用

在信号/插槽中使用自定义对象(类似PyQt_PyObject)

如何在 AWS lex 上拥有自由文本自定义插槽类型

如何扩展Alexa Skill的自定义插槽类型?

如何访问插槽内的自定义元素的 light dom?

如何在VueJS模板中声明带有动态名称和动态组件的插槽列表?

Alexa Skill 中是否需要自定义插槽值?

如何在Angular 6中使用ngModel创建自定义输入组件?

如何将点击的信号和插槽添加到Qt中的自定义按钮

如何在 Svelte 中从父组件修改子组件的插槽

如何在材料表中使用自定义'editComponent'?