b表中的BootstrapVue条件列 [英] BootstrapVue conditional column in b-table

问题描述

如果当前用户是管理员，我只想显示我的一列.我不确定如何使用bootstrapVue做到这一点.有什么想法吗?

I'd like to only show one of my columns if the current user is an admin. I'm not sure how to do this with bootstrapVue. Any ideas?

推荐答案

以下是基于特洛伊评论的摘要.

Here's a snippet based on Troy's comment.

我已将自定义属性添加到名为requiresAdmin的字段对象.这不是标准Bootstrap-Vue的一部分.

I've added a custom property to the field object called requiresAdmin. This is not part of standard Bootstrap-Vue.

您可以使用它来过滤所有要求用户成为计算属性中的管理员的字段.基于用户是否是管理员.这样可以轻松地添加和删除要求用户为管理员的字段.

You can use this to filter out all the fields that require's the user to be an admin in a computed property. Based on whether the user is an admin or not. This makes it easy to add and remove fields that require's the user to be an admin.

new Vue({
  el: '#app',
  computed: {
    computedFields() {
      // If the user isn't an admin, filter out fields that require auth.
      if(!this.isUserAdmin)
        return this.fields.filter(field => !field.requiresAdmin);
        
      // If the user IS an admin, return all fields.
      else
        return this.fields;
    }
  },
  data() {
      return {
        isUserAdmin: false,
        fields: [
          { key: 'first', label: 'First Name' },
          { key: 'last', label: 'Last Name' },
          { key: 'age', label: 'Age' },
          { key: 'sex', label: 'Sex' },
          { key: 'secretActions', label: 'Secret Actions', requiresAdmin: true },
        ],
        items: [
          { first: 'John', last: 'Doe', sex: 'Male', age: 42 },
          { first: 'Jane', last: 'Doe', sex: 'Female', age: 36 },
          { first: 'Rubin', last: 'Kincade', sex: 'Male', age: 73 },
          { first: 'Shirley', last: 'Partridge', sex: 'Female', age: 62 }
        ]
      }
    }
})

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.3.0/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.3.0/dist/bootstrap-vue.js"></script>

<div id="app" class="p-3">
  <b-btn @click="isUserAdmin = !isUserAdmin">
    Toggle admin user ({{ isUserAdmin }})
  </b-btn>
  <br /><br />
  <b-table :fields="computedFields" :items="items">
    <template v-slot:cell(secretActions)>
      <b-btn>Edit User</b-btn>
      <b-btn>Delete User</b-btn>
    </template>
  </b-table>
</div>

这篇关于b表中的BootstrapVue条件列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！