对表进行排序 Vue.js

我想对一个表格按列进行排序,当按下ID按钮时,所有列从高到低排序,反之亦然。当按下ID按钮时,所有的列从高到低排序,反之亦然,按下其他两个按钮也是如此。我怎样才能做到这一点?

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

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

解决方案:

如果你想自己实现的话,下面是它的样子,请注意,这是非常基本的功能,当你开始添加额外的功能时,你可能会看到使用一个已经完成所有功能的组件带来的更多好处。

无论如何,你可以通过使用一个计算的(sortedList)来存储数组的排序版本。然后使用另一个数据变量来存储你想通过(sortBy),还可以选择存储一个排序方向(sortOrder)

然后加一个 sort 方法,传递排序键并更新 sortBy 价值,或 sortOrder. 当其中任何一个值(甚至是源数组)发生变化时,计算将使用排序函数对数组进行重新排序。

new Vue({
  el: "#app",
  data: {
  	sortBy: "id_section",
    sortOrder: 1,
    userInfo: [
      {
        "id_store": 4,
        "id_section": 1,
        "desc_section": "MATERIALES DE CONSTRUCCION yeh",
        "id_rule": 1,
        "sale_potential": "69413.5525190617"
      },
      {
        "id_store": 4,
        "id_section": 2,
        "desc_section": "CARPINTERIA Y MADERA",
        "id_rule": 1,
        "sale_potential": "74704.3439572555"
      },
      {
        "id_store": 4,
        "id_section": 3,
        "desc_section": "ELECTR-FONTAN-CALOR",
        "id_rule": 1,
        "sale_potential": "101255.89182774"
      }
    ]
  },
  computed: {
    sortedList() {
      return [...this.userInfo]
        .map(i => ({...i, sale_potential:parseFloat(i.sale_potential)}))
        .sort((a,b) => {
      	  if (a[this.sortBy] >= b[this.sortBy]) {
        	return this.sortOrder
          }
        return -this.sortOrder
      })
    }
  },
  methods: {
  	sort: function(sortBy){
    	if(this.sortBy === sortBy) {
      	this.sortOrder = -this.sortOrder;
      } else {
      	this.sortBy = sortBy
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  [{{sortBy}}] [{{sortOrder}}]
  <table id="mi-tabla">
    <thead>
      <tr class="encabezado-derecha">
        <th @click='sort("id_section")'>{{ sortBy === 'id_section' ? '*' : '' }}ID</th>
        <th @click='sort("desc_section")'>{{ sortBy === 'desc_section' ? '*' : '' }}Nombre de sección</th>
        <th @click='sort("sale_potential")'>{{ sortBy === 'sale_potential' ? '*' : '' }}Potencial (€)</th>
      </tr>
    </thead>
    <tbody>
      <tr class="item" v-for="user in sortedList">
        <td>{{user.id_section}}</td>
        <td>{{user.desc_section}}</td>
        <div class="acceder">
          <td>{{user.sale_potential | currency}}</td>
          <img src="../../iconos/icon/chevron/right@3x.svg" alt />
        </div>
      </tr>
    </tbody>
  </table>
</div>

给TA打赏
共{{data.count}}人
人已打赏
未分类

完善二维阵列

2022-9-8 7:31:20

未分类

不能从'bleu'导入名称'evalu'。

2022-9-8 7:31:22

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索