vue.js - 为什么即使我在服务器上指定了列，b-table 也会显示数据库的所有列

Question

为什么我的 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 如下所示:

Answer 1

您需要在 b-table 的字段定义中定义您的列名称。如果您多次提交回复但想要显示某些字段。

请在下面的代码和工作demo .

代码片段

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>