小编Sha*_*awn的帖子

如何在 Bootstrap Vue 表中动态添加一列

我正在使用 Bootstrap Vue并希望动态添加一列或仅在数据中满足某些条件时才显示该列。我正在尝试了解作用域插槽以及这是否是我应该使用格式化程序回调函数的方向。理想情况下,只有在数据中可用时,我才想添加列“版本 2”。我不知道从哪里开始。

代码

    <b-table striped responsive hover :items="episodes" :fields="fields" :filter="filter">
           <template v-slot:cell(version_1)="data">
        <a :href="`${data.value.replace(/[^a-z]-/i,'-').toLowerCase()}`">Definition</a>
      </template>

    </b-table>
</template>
<script>
data() {

    return {
      fields: [{
          key: 'category',
          sortable: true
        },
        {
          key: 'episode_name',
          sortable: true
        },
        {
          key: 'episode_acronym',
          sortable: true
        },
        {
          key: 'version_1',
          sortable: true
        }
      ],
      episodes: [],
      versions: [],
    }

  },   
mounted() {
    return Promise.all([
        // fetch the owner of the blog
        client.getEntries({
          content_type: 'entryEpisodeDefinitions',
          select: 'fields.title,fields.category,fields.slug,fields.episodeAcronym,fields.version,sys.id'
        })

      ])
        .then(response => {
        // console.info(response[0].items); …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js bootstrap-vue

6
推荐指数
1
解决办法
4140
查看次数

标签 统计

bootstrap-vue ×1

javascript ×1

vue.js ×1