Почему b-таблица отображает все столбцы моей базы данных, даже если я указываю столбцы на моем сервере - PullRequest
Новая
       60

Почему b-таблица отображает все столбцы моей базы данных, даже если я указываю столбцы на моем сервере

1 голос
/ 20 сентября 2019

Почему моя b-таблица отображает все столбцы моей таблицы, даже если я только выбрал некоторые?

Вот мой код на стороне сервера, который вызывает выбранные столбцы.Кроме того, это сработало, если я использую только bootstrap, а не bootstrap-vue. 

router.get('/users', function(req, res) {
  /* Get the person who has the latest date  */
  let getUser = "SELECT DISTINCT(MEMB.MEMB_N), MAX(PrintDate) AS PrintDate, MEMB.* \
                       FROM MEMB LEFT JOIN VD_Print ON MEMB.MEMB_N = VD_Print.MEMB_N GROUP BY MEMB.LAST_M \
                       ORDER BY PrintDate DESC LIMIT 100;"
  myDB.query(getUser, function(err, rows) {
    if (err) {
      console.log(err);
    } else {
      console.log(rows);
      res.send(rows);
    }
  });
});

И это на моей клиентской стороне vuejs 

<template>
      <section>
        <div class="sidebar"></div>
        <div>
          <b-form-input class="searchBar" placeholder="Search Here"></b-form-input>
        </div>
        <div>
          <b-table class="table" striped hover :items="results"></b-table>
        </div>
        <b-button class="printBtn">PRINT</b-button>
      </section>
    </template>

<script>
  import axios from "axios";
  export default {
    data() {
      return {
        results: [],
      };
    },
    mounted() {
      this.getUsers();
    },
    methods: {
      getUsers: function() {
        axios
          .get("http://localhost:9000/api/users/")
          .then(response => (this.results = response.data))
          .catch(error => alert(error));
      }
    }
  };
</script>

Мой JSON выглядит так:

json

1 Ответ

1 голос
/ 20 сентября 2019

Вам необходимо определить имя своего столбца в определении поля b-table.Если вы ответили несколько раз, но хотите отобразить некоторые поля.

Пожалуйста, введите код ниже и работайте демо .

КОД SNIPPET 

export default {
  data() {
    return {
      selectAll: false,
      records: [],
      perPage: 10,
      currentPage: 1,
      pageOptions: [5, 10, 15],
      column: [{
        key: "name",
        sortable: true,
        label: "Log File Name"
      }, {
        key: "lastModified",
        sortable: true,
        label: "Last Modified Date",
        class: "text-right options-column"
      }]
    };
  }
}

<template>
    <div>
      <div v-if="!hasRecords" style="text-align: center"><br><br>LOADING DATA...</div>
      <div style="padding: 15px;" v-if="hasRecords">
        <b-table :items="records" :fields="column" striped hover :current-page="currentPage" :per-page="perPage">
        </b-table>
        <b-row>
          <b-col md="6" class="my-1">
              <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
          </b-col>
          <b-col md="6" class="my-1">
              <b-form-group horizontal label="Per page" class="mb-0">
                  <b-form-select :options="pageOptions" v-model="perPage" />
              </b-form-group>
          </b-col>
        </b-row>
      </div>
    </div>
</template>
...