twitter-bootstrap - b 表中的 BootstrapVue 条件列

Question

如果当前用户是管理员，我只想显示我的专栏之一。我不知道如何使用 bootstrapVue 来做到这一点。有什么想法吗？

Answer 1

这是基于 Troy 评论的片段。

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

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

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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4944445f585f594a5b6b1f051f051a" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="096b66667d7a7d7b6879247f7c6c493b273a2739" rel="noreferrer noopener nofollow">[email protected]</a>/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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d1f1212090e090f1c0d500b08183d4f534e534d" rel="noreferrer noopener nofollow">[email protected]</a>/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>