Vue-如何从B表访问元素

Question

我正在使用“ b-table”和“：fields”和“：items”，我已经知道如何使用“ v-slot自定义特定字段： cell（keyname）“。但是知道我想获取此列中每个元素的值，并根据其值来不同地显示它。有办法吗？

我的桌子看起来像这样

        <b-table
                striped hover
                responsive
                :fields="shotlist_tab.fields"
                :items="shotlist_tab.shots">

            <template v-slot:cell(frame)>
                <!-- ACCESS ELEMENT -->
                <div v-if="???">
                    <font-awesome-icon class="icon" :icon="['fas', 'image']"/>
                </div>
                <div v-else>
                    <img src="../../assets/logo.png" height="50" width="50" alt="frame"/>
                </div>

我已经用v-for="(object, index) in objects"创建了一个标准表，在这里我可以用object.element访问每个数据我想用b表复制它。

Answer 1

插槽是作用域的，这意味着您将通过单元格值以及附加信息（即整个行数据，单元格的字段定义等）来传递。

<template v-slot:cell(frame)="scope">
  <!-- You may need to adjust the condition/check for your situation -->
  <div v-if="scope.value === null">
    <font-awesome-icon class="icon" :icon="['fas', 'image']"/>
  </div>
  <div v-else>
    <img src="../../assets/logo.png" height="50" width="50" alt="frame"/>
  </div>
</template>

请参阅文档，以获取有关自定义数据的呈现，网址为https://bootstrap-vue.js.org/docs/components/table#custom-data-rendering