时间戳

首页 > 解决方案 > 根据存储获取器有条件地显示/隐藏 b 表列

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

问题描述

我想根据用户是否为管理员来显示/隐藏表列“ 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>

这是store getter 中的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' }
      ]
    }

store getter 有 isAdmin 标志，将用于隐藏/显示列

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

更新 -

如何从商店本身访问 isAdmin 值？它在吸气剂中，如下所示：

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
        })
     }

标签： vue.jsvuex

解决方案

您可以使用 Vuex 中的 mapGetters 并将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. 像下面这样的东西会将管理项放在操作之前：

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

推荐阅读