gpt4 book ai didi

sorting - 排序表 Vue.js

转载 作者:行者123 更新时间:2023-12-01 21:40:47 27 4
gpt4 key购买 nike

我正在尝试按列对表格进行排序。当按下 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>

关于sorting - 排序表 Vue.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61390986/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com