如何在包含数据的 table 中显示 json 文件中的特定字段？

Question

我有大约 300 条这样的记录。现在它显示 table 中的所有项目。我只想要名字，蛋白质和卡路里将显示在我的 table 中。我该怎么做呢？我正在从 API.

中获取列表

[
   {
      "id":"711113fb-c3d1-46db-9f08-737a66ba643d",
      "name":"Banana",
      "fats":"0.2",
      "carbohydrates":"11.8",
      "proteins":"0.8",
      "kcal":"46",
      "tags":[
         
      ],
      "tag_ids":[
         
      ],
      "diet_phases":[
         
      ],
      "diet_phase_ids":[
         
      ],
      "product_group_id":"1cad5993-78f8-43b0-a0c5-f6f88fdf53b8",
      "product_group_name":"Fruits"
   },

      productList: (state) => state.products.list,

This.items 是一个数组，其中包含我的 table.

中的项目

挂载： this.fetchProducts().then(() => { this.items = this.productList; }); },

...mapActions ({ fetchProducts：“products/fetch”，}）

actions: {
    fetch({ commit }) {
      return api.products.list({}).then(({ data }) => {
        commit(SET_LIST, data.results);
      });
    },

Answer 1

仍然缺少组件的模板部分，我不知道 bootstrap-vue table。所以我假设你的 this.items 只是呈现出你的项目对象的每个键。所以你想控制在 JS 代码而不是模板中呈现的内容，你可以使用 map 函数。因此，与其直接将其分配给 this.items，不如这样做：

this.items = this.productList.map((item) => {
    return {
        name: item.name,
        proteins: item.proteins,
        kcal: item.kcal,
    };
});

如何在包含数据的 table 中显示 json 文件中的特定字段？

How do I display specific fields from json file in a table with data?

vuex

vuejs2

vuejs3