vue.js - vue js 2对表格进行排序
问题描述
我有 2 个关于 vue.js 2 的问题和一个小提琴:https ://jsfiddle.net/tmun9cxa/1/
当您单击列标题时,为什么我的排序不起作用?解决办法是什么?
如何使搜索输入字段仅搜索 pn 列?
我发现的很多例子都在使用 vue1 并且已经过时了。
<input type="text" value="" v-model="search" placeholder="Search">
<table style="text-align: center;">
<thead>
<tr>
<th v-for="column in columns">
<a
href="#"
v-on:click="sort(column.shortcode)">{{column.label}}
</a>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(product) in products">
<td>{{product.pn}}</td>
<td>{{product.od}}</td>
<td>{{product.id}}</td>
<td>{{product.thickness}}</td>
<td>{{product.lo}}</td>
<td>{{product.weight}}</td>
</tr>
</tbody>
</table>
此处为 javascript
var vm = new Vue({
el: '#app',
data: {
currentSort: 'pn',
currentSortDir: 'asc',
search: '',
columns: [
{ label: 'P/N', shortcode: 'pn' },
{ label: 'OD (De,mm)', shortcode: 'od' },
{ label: 'ID (De,mm)', shortcode: 'id' },
{ label: 'Thickness (De,mm)', shortcode: 'thickness' },
{ label: 'LO', shortcode: 'lo' },
{ label: 'Weight (kg/1000)', shortcode: 'weight' },
], // columns
products: [
{
pn: 170158,
od: 13,
id: .44,
thickness: 1,
lo: .45,
weight: .7
},{
pn: 1803561,
od: 12,
id: .8,
thickness: .7,
lo: .11,
weight: .5
},{
pn: 170149,
od: 9,
id: .64,
thickness: .6,
lo: .75,
weight: .3
},{
pn: 150149,
od: 15,
id: .22,
thickness: .3,
lo: .55,
weight: .9
},
], // products
},
methods: {
sort:function(col) {
//console.log( 'current: '+this.currentSort );
//console.log( 'col: '+col );
//var colthing = col;
// if you click the same label twice
if(this.currentSort == col){
console.log( 'same col: '+col );
// sort by asc
this.products = this.products.sort((a, b) => {
return a.col >= b.col;
});
}else{
this.currentSort = col;
console.log( 'diff col: '+col );
// sort by desc
this.products = this.products.sort((a, b) => {
return a.col <= b.col;
});
} // end if
}, // sort
}, // methods
}); // vue
解决方案
正如所指出的,列排序不起作用,因为您需要使用a[col]
而不是a.col
此外,您应该考虑使用计算值而不是修改原始数据。这也使过滤更容易。
这是更新的脚本(请注意,这<tr v-for="(product) in products">
需要<tr v-for="(product) in showProducts">
它才能工作)
var vm = new Vue({
el: '#app',
data: {
currentSort: 'pn',
currentSortDir: 'asc',
search: '',
columns: [
{ label: 'P/N', shortcode: 'pn' },
/// more columns ...
], // columns
products: [
//.... objects
], // products
},
computed: {
showProducts() {
return this.products.filter(a => {
console.log(a.pn)
return (a.pn + '').includes(this.search)
})
.sort((a, b) => {
if (this.currentSortDir === 'asc') {
return a[this.currentSort] >= b[this.currentSort];
}
return a[this.currentSort] <= b[this.currentSort];
})
},
},
methods: {
sort:function(col) {
// if you click the same label twice
if(this.currentSort == col){
this.currentSortDir = this.currentSortDir === 'asc' ? 'desc' : 'asc';
}else{
this.currentSort = col;
console.log( 'diff col: '+col );
} // end if
}, // sort
}, // methods
}); // vue
推荐阅读
- sql - 等于操作中“Latin1_General_CI_AS”和“SQL_Latin1_General_CP1_CI_AS”之间的冲突
- c++ - 在大型代码库中替换 c++ 基本类型
- java - java swing 是否适用于 java 9+ 以及关于 netbeans 支持的内容
- python - 仅在函数内更改 np.seterr 行为
- visual-studio-code - 如何选择视觉工作室代码中的所有文本?
- python - 如何在 Python 类中更好地隔离我的数据
- ionic4 - 如何在 ionic 4 中禁用离子按钮阴影?
- c++ - OpenGL导入PNG变暗
- javascript - 传单弹出框问题 - 框角上的小标签。这是某种故障吗?
- apache - htaccess中的e是什么意思?