스토어 게터를 기준으로 조건부로 b-테이블 열 표시/숨기기

스토어 게터를 기준으로 조건부로 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>

다음은 productsFieldsFor상점 게터의 BT 테이블.

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-table 태그 또는 계산 중?)

업데이트됨 -

스토어 자체에서 isAdmin 값에 액세스하려면 어떻게 해야 합니까?아래 표시된 바와 같이 입력기:

getters: {isAdmin: (상태, getters) => {returngeters.isLogged&&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
        })
     }

맵을 사용할 수 있습니다. Vuex 및 맵의 GettersproductFieldsForBTable사용자 구성 요소에 대한 계산된 속성입니다.그런 다음 줄에 배열을 반환하는 대신 다음과 같은 작업을 수행합니다.

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

언급URL : https://stackoverflow.com/questions/56776083/conditionally-show-hide-b-table-column-based-on-store-getters