排序表 Vue.js

Question

我正在尝试按列对表格进行排序。当按下 ID 按钮时，所有列都会从最高到最低排序，反之亦然，按下其他两个按钮也是如此。我该怎么做？

\n\n

\r\n

\r\n

<table id="mi-tabla">\r\n            <thead>\r\n            <tr class="encabezado-derecha" >\r\n              <th>ID</th>\r\n              <th>Nombre de secci\xc3\xb3n</th>\r\n              <th>Potencial (\xe2\x82\xac)</th>\r\n            </tr>\r\n            </thead>\r\n            <tbody>\r\n            <tr class="item" v-for="user in userInfo" @click="openDiv(), showInfo1(user.id_section)">\r\n              <td>{{user.id_section}}</td>\r\n              <td>{{user.desc_section}}</td>\r\n              <div class="acceder">\r\n              <td>{{user.sale_potential | currency}}</td>\r\n              <img src="../../iconos/icon/chevron/right@3x.svg" alt />\r\n              </div>\r\n            </tr>\r\n            </tbody>\r\n          </table>

\r\n

\r\n

\r\n

\n\n

\r\n

\r\n

{\r\n      "id_store": 4,\r\n      "id_section": 1,\r\n      "desc_section": "MATERIALES DE CONSTRUCCION yeh",\r\n      "id_rule": 1,\r\n      "sale_potential": "69413.5525190617"\r\n    },\r\n    {\r\n      "id_store": 4,\r\n      "id_section": 2,\r\n      "desc_section": "CARPINTERIA Y MADERA",\r\n      "id_rule": 1,\r\n      "sale_potential": "74704.3439572555"\r\n    },\r\n    {\r\n      "id_store": 4,\r\n      "id_section": 3,\r\n      "desc_section": "ELECTR-FONTAN-CALOR",\r\n      "id_rule": 1,\r\n      "sale_potential": "101255.89182774"\r\n    }\r\n    ]

\r\n

\r\n

\r\n

\n

Answer 1

如果您想自己实现，它可能看起来像这样，请注意，这是非常基本的功能，当您开始添加其他功能时，您可能会发现使用已经完成这一切的组件会带来更多好处。

\n\n

无论如何，您可以做到这一点的方法是使用计算（sortedList）来存储数组的排序版本。然后使用另一个数据变量来存储要存储的列 ( sortBy)，并且可以选择存储排序方向 (sortOrder )

\n\n

然后添加一个sort传递排序键并更新sortBy值和/或sortOrder. 当这些值（甚至源数组）中的任何一个发生更改时，计算将使用排序函数对数组重新排序。

\n\n

\r\n

\r\n

new Vue({\r\n  el: "#app",\r\n  data: {\r\n  \tsortBy: "id_section",\r\n    sortOrder: 1,\r\n    userInfo: [\r\n      {\r\n        "id_store": 4,\r\n        "id_section": 1,\r\n        "desc_section": "MATERIALES DE CONSTRUCCION yeh",\r\n        "id_rule": 1,\r\n        "sale_potential": "69413.5525190617"\r\n      },\r\n      {\r\n        "id_store": 4,\r\n        "id_section": 2,\r\n        "desc_section": "CARPINTERIA Y MADERA",\r\n        "id_rule": 1,\r\n        "sale_potential": "74704.3439572555"\r\n      },\r\n      {\r\n        "id_store": 4,\r\n        "id_section": 3,\r\n        "desc_section": "ELECTR-FONTAN-CALOR",\r\n        "id_rule": 1,\r\n        "sale_potential": "101255.89182774"\r\n      }\r\n    ]\r\n  },\r\n  computed: {\r\n    sortedList() {\r\n      return [...this.userInfo]\r\n        .map(i => ({...i, sale_potential:parseFloat(i.sale_potential)}))\r\n        .sort((a,b) => {\r\n      \t  if (a[this.sortBy] >= b[this.sortBy]) {\r\n        \treturn this.sortOrder\r\n          }\r\n        return -this.sortOrder\r\n      })\r\n    }\r\n  },\r\n  methods: {\r\n  \tsort: function(sortBy){\r\n    \tif(this.sortBy === sortBy) {\r\n      \tthis.sortOrder = -this.sortOrder;\r\n      } else {\r\n      \tthis.sortBy = sortBy\r\n      }\r\n    }\r\n  }\r\n})

\r\n

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>\r\n<div id="app">\r\n  [{{sortBy}}] [{{sortOrder}}]\r\n  <table id="mi-tabla">\r\n    <thead>\r\n      <tr class="encabezado-derecha">\r\n        <th @click=\'sort("id_section")\'>{{ sortBy === \'id_section\' ? \'*\' : \'\' }}ID</th>\r\n        <th @click=\'sort("desc_section")\'>{{ sortBy === \'desc_section\' ? \'*\' : \'\' }}Nombre de secci\xc3\xb3n</th>\r\n        <th @click=\'sort("sale_potential")\'>{{ sortBy === \'sale_potential\' ? \'*\' : \'\' }}Potencial (\xe2\x82\xac)</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr class="item" v-for="user in sortedList">\r\n        <td>{{user.id_section}}</td>\r\n        <td>{{user.desc_section}}</td>\r\n        <div class="acceder">\r\n          <td>{{user.sale_potential | currency}}</td>\r\n          <img src="../../iconos/icon/chevron/right@3x.svg" alt />\r\n        </div>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>

\r\n

\r\n

\r\n

\n