根据存储获取器有条件地显示/隐藏 b 表列

Question

我想根据用户是否为 isAdmin 显示/隐藏表列“first_name”。

这是我的桌子：

<b-table
      striped
      hover
      small
      stacked="sm"
      selectable
      select-mode="single"
      show-empty
      :items="allProducts"
      :fields="productsFieldsForBTable"
      :busy="isLoading"
      primary-key="id"
    >
      <template slot="actions" slot-scope="data">
        <select v-model="data.selected">
          <option v-for="user in users" :key="user.id" :value="user.id">{{user.first_name}}</option>
        </select>
      </template>
    </b-table>

这是商店吸气剂中的 productsFieldsForBTable。

productsFieldsForBTable: () => {
      return [ 
        {
          key: 'product_name',
          sortable: true,
        },
        {
          key: 'buying_price',
          sortable: true,
        },
        {
          key: 'notes',
          sortable: true,
        },
        {

          key: 'first_name',
          label: 'User',
          sortable: true,
        },
        // A virtual column for additional action buttons
        { key: 'actions', label: 'Actions' }
      ]
    }

存储 getter 具有 isAdmin 标志，用于隐藏/显示列

我不确定要使用什么语法以及在哪里检查条件？ （在 b-table 标记中还是在计算中？）

更新 -

如何从商店本身访问 isAdmin 值？它在 getter 中如下所示：

吸气剂：{ isAdmin: (state, getters) => { return getters.isLoggedIn && state.user.role === 'Admin' }, ....

if(getter.isAdmin){ // how to access getters' isAdmin here? // this.$store.getters.isAdmin is not working here.

        fields.push({

          key: 'first_name',
          label: 'User',
          sortable: true
        })
     }

Answer 1

您可以使用来自 Vuex 的 mapGetters 并将 productFieldsForBTable 作为计算属性映射到您的组件。然后在你的 getter 中，而不是在行中返回一个数组，做这样的事情：

    productsFieldsForBTable: (state, getters) => {
      var fields = [ 
        {
          key: 'product_name',
          sortable: true,
        },
        {
          key: 'buying_price',
          sortable: true,
        },
        {
          key: 'notes',
          sortable: true,
        },
        {

          key: 'first_name',
          label: 'User',
          sortable: true,
        },
        // A virtual column for additional action buttons
        { key: 'actions', label: 'Actions' }
      ]

      if(getters.isAdmin){
         fields.push({
           key: 'admin_field',
           sortable: true,
         })
      }

      return fields
    }

如果您不希望管理字段位于表的末尾，则始终可以使用 splice 函数而不是 push。像下面这样的东西会将管理项放在操作之前：

var index = 4 // index you want to insert the new column at
fields.splice(index, 0, { key: 'admin_field', sortable: true })