Question

我要根据用户 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值？如下图所示：

获取者：{ isAdmin ：（状态，getter）=> {返回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并将.nav>li:not(.active)>a:hover { background-color: peachpuff; color: black; }映射为组件的计算属性。然后，在您的getter中，而不是在行中返回数组，请执行以下操作：

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。如下所示，会将admin项放在操作之前：

push

根据商店的吸气剂有条件地显示/隐藏b表列

1 个答案: