如何在vue js中呈现与数组对象不同顺序的列表？

cidc1ykv 于 2023-02-09 发布在 Vue.js

关注(0)|答案(3)|浏览(123)

我从服务器获取数据的方式如下：

"cells": [
        {
          "consultingBudgetHeadName": "Available hours",
          "value": 1806,
          "valueMap": "1 806"
        },
        {
          "consultingBudgetHeadName": "Available customer hours",
          "value": 1773.2,
          "valueMap": "1 773,20"
        },
        {
          "consultingBudgetHeadName": "Absence hours",
          "value": 32.8,
          "valueMap": "32,80"
        },
        {
          "consultingBudgetHeadName": "Available hours project",
          "value": -7092.8,
          "valueMap": "-7 092,80"
        },
        {
          "consultingBudgetHeadName": "Average price",
          "value": 0,
          "valueMap": "0"
        },
        {
          "consultingBudgetHeadName": "Agreement hours",
          "value": 8866,
          "valueMap": "8 866"
        },
        {
          "consultingBudgetHeadName": "Utilization agreements %",
          "value": 500,
          "valueMap": "500"
        }
      ]

现在，如果我这样呈现一个列表：

<template v-for="(cell, index) in cells">
   <li>
      {{ cell.consultingBudgetHeadName }}
   </li>
</template>

它将以如下方式显示输出：

可用小时数
可用客户小时数
缺勤时数
可用时数项目
平均价格
协议小时数
使用协议%

但是我需要一个不同于数组顺序的顺序，我希望我的顺序是这样的：

可用小时数
缺勤时数
可用客户小时数
协议小时数
可用时数项目
平均价格
使用协议%

因此，我没有动态呈现，而是获取数组元素的索引，并以如下方式呈现元素：

<ul v-for="(row, rowIndex) in data.rows">
   <li>{{ row.cells[0].consultingBudgetHeadName }}</li>
   <li>{{ row.cells[2].consultingBudgetHeadName }}</li>
   <li>{{ row.cells[1].consultingBudgetHeadName }}</li>
   <li>{{ row.cells[5].consultingBudgetHeadName }}</li>
   <li>{{ row.cells[3].consultingBudgetHeadName }}</li>
   <li>{{ row.cells[4].consultingBudgetHeadName }}</li>
   <li>{{ row.cells[6].consultingBudgetHeadName }}</li>
</ul>

但我不认为这是一个好主意，因为索引号可以随时在数据库中更改。那么，实现这些的好方法是什么呢？

- 一个

vue.js

来源：https://stackoverflow.com/questions/74041319/how-to-render-list-with-different-order-from-array-object-in-vue-js

3条答案

按热度按时间

7d7tgy0s1#

您可以Map数组并返回按computed属性排序的数组：

const mappedCells = new Map([["Available hours", 1], ["Available customer hours", 3], ["Absence hours", 2], ["Available hours project", 5], ["Average price", 6], ["Agreement hours", 4], ["Utilization agreements %", 7]])
new Vue({
  el: "#demo",
  data() {
    return {
      "cells": [{"consultingBudgetHeadName": "Available hours", "value": 1806, "valueMap": "1 806"}, {"consultingBudgetHeadName": "Available customer hours", "value": 1773.2, "valueMap": "1 773,20"}, {"consultingBudgetHeadName": "Absence hours", "value": 32.8, "valueMap": "32,80"}, {"consultingBudgetHeadName": "Available hours project", "value": -7092.8, "valueMap": "-7 092,80"},  {"consultingBudgetHeadName": "Average price", "value": 0, "valueMap": "0"}, {"consultingBudgetHeadName": "Agreement hours", "value": 8866, "valueMap": "8 866"}, {"consultingBudgetHeadName": "Utilization agreements %", "value": 500, "valueMap": "500"}]
    }
  },
  computed: {
    sortedCells() {
      return this.cells.map(c => {
        c.nr = mappedCells.get(c.consultingBudgetHeadName)
        return c
      }).sort((a, b) => (a.nr > b.nr) ? 1 : -1)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <li v-for="(cell, i) in sortedCells" :key="i">
      {{ cell.consultingBudgetHeadName }}
   </li>
</div>

赞(0）回复(0）举报 2023-02-09

0wi1tuuw2#

我认为更好的解决方案是在数据库中为项目的index增加一个字段，然后在前端检索数据时可以根据该字段对列表进行排序。
例如

"cells": [
        {
          "consultingBudgetHeadName": "Available hours",
          "value": 1806,
          "valueMap": "1 806",
          "order": 1,
        },
        {
          "consultingBudgetHeadName": "Available customer hours",
          "value": 1773.2,
          "valueMap": "1 773,20",
          "order": 3,
        },
        {
          "consultingBudgetHeadName": "Absence hours",
          "value": 32.8,
          "valueMap": "32,80",
          "order": 2,
        },
        {
          "consultingBudgetHeadName": "Available hours project",
          "value": -7092.8,
          "valueMap": "-7 092,80",
          "order": 6,
        },
        {
          "consultingBudgetHeadName": "Average price",
          "value": 0,
          "valueMap": "0",
          "order": 4,
        },
        {
          "consultingBudgetHeadName": "Agreement hours",
          "value": 8866,
          "valueMap": "8 866",
          "order": 5,
        },
        {
          "consultingBudgetHeadName": "Utilization agreements %",
          "value": 500,
          "valueMap": "500",
          "order": 7,
        }
      ]

然后为排序后的单元格设置一个计算属性。

computed: {
  sortedCells() {
     return this.cells.sort((a, b) => a.order - b.order)
  }
}

赞(0）回复(0）举报 2023-02-09

dsekswqp3#

你可以把你的排序键列表放到一个数组中，然后用v-for覆盖它。

<div v-for="a in all">
  <div v-for="key in presortedListOfKeys">
    {{a[key]}}
  </div>
</div>

赞(0）回复(0）举报 2023-02-09

我来回答

如何在vue js中呈现与数组对象不同顺序的列表？

3条答案

相关问题

热门标签

最新问答