Как получить Master-детали с помощью квазара qtable - PullRequest
Новая
       80

Как получить Master-детали с помощью квазара qtable

0 голосов
/ 23 января 2020

Я хотел бы знать, как получить основные данные, используя две q-таблицы. Таким образом, когда строка выбирается в qtable (staffs), все детали отображаются в qtable (staff_details). 

<q-table title="Staff List" ref="dataTable" :data="staffs" dense row-key="id" v-if="staffs.length > 0"
            :config="configs" :columns="columns_Master" selection="single" :selected.sync="selected"
            class="striped-odd loosed flipped">
            <template v-slot:body-cell="props">
              <q-td :props="props"  @click.native="selectedStaff(props.row.email)">
                <div>{{props.value}}</div>
              </q-td>
            </template>
</q-table>

Вторая таблица для деталей 

<q-table title="Staff Details" ref="staffData" :data="staff" dense row-key="id"
            :config="configs_detail" :columns="columns_Details" class="striped-odd loosed flipped">
</q-table>

Файл сценария 

methods: {
    selectedStaff (email) {
      console.log('data: ', email)
      this.$auth.fetchStaffEmail(email)
        .then((response) => {
          console.log('by email', response)
          this.staff = response.data.data[0]
          console.log(this.staff)
        })
    },
    getStaffs () {
      this.$auth.fetchStaff()
        .then(response => {
          console.log('getstaff:', response)
          this.staffs = response.data.data
        })
    }

И мой vuex / ax ios

const STAFF_ROUTE = '/staffs'

// fetch staff details
export function fetchStaffEmail (state, data) {
  let token
  if (LocalStorage.has('token')) {
    token = LocalStorage.getItem('token')
  } else if (SessionStorage.has('token')) {
    token = SessionStorage.getItem('token')
  }
  if (token) {
    axiosInstance.defaults.headers.common['Authorization'] = 'Bearer ' + token
    if (data) {
      return axiosInstance.get(STAFF_ROUTE + '?email=' + data)
    }
  }
}

Я использую перья js и MySQL в качестве бэкэнда

...