Условно показать / скрыть столбец b-таблицы на основе получателей магазина

Question

Я хочу показать / скрыть столбец таблицы ' first_name ' в зависимости от того, является ли пользователь isAdmin или нет.

Это моя таблица:

<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' }
      ]
    }

Получатели магазина имеют флаг isAdmin, который будет использоваться для скрытия / отображения столбца

Я не уверен, какой синтаксис использовать и где проверять условия?(в теге b-таблицы или в вычисляемом?)

Обновлено -

Как получить доступ к значению isAdmin из самого хранилища?в getters, как показано ниже:

getters: {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

Вы можете использовать mapGetters из Vuex и карту productFieldsForBTable в качестве вычисляемого свойства для вашего компонента.Затем в своем геттере вместо того, чтобы возвращать массив в строке, сделайте что-то вроде этого:

    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.Примерно так, как показано ниже, поместит элемент admin перед действиями:

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