<el-button type="primary" size="mini" @click="editSort(item,'row')">
<span v-if="item.sort==='asc'"><i class="el-icon-caret-top"></i></span>
<span v-else-if="item.sort==='desc'"><i class="el-icon-caret-bottom"></i></span>
<span v-else><i class="el-icon-d-caret"></i></span>
</el-button>
for (let item1 of this.dragTo.rows) {
item1.sort = 'dcaret'
}
editSort(o,type) {
this.sortItem = o
this.sortType = type
switch (o.sort) {
case 'asc':
o.sort = 'desc';
break;
case 'desc':
o.sort = 'dcaret';
break;
default:
o.sort = 'asc';
break;
}
if (this.sortType === 'row') {
this.dragTo.columns.forEach(item => {
item.sort = 'dcaret'
})
this.dragTo.values.forEach(item => {
item.sort = 'dcaret'
})
this.dragTo.rows.forEach(item => {
if (item.column === this.sortItem.column) {
item.sort = this.sortItem.sort
}
})
}
this.$forceUpdate()
},
this.tableData.forEach((val, i) => {
Object.keys(val).forEach(key => {
this.dragTo.rows.forEach(item => {
if (key === item.alias) {
if (item.sort === 'asc') {
this.tableData.sort(sortAscMethod(key))
} else if (item.sort === 'desc') {
this.tableData.sort(sortDescMethod(key))
}
}
})
})
})
export function sortAscMethod(prop) {
return function (obj1, obj2) {
var val1 = obj1[prop]
var val2 = obj2[prop]
if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
val1 = Number(val1);
val2 = Number(val2);
}
if (val1 < val2) {
return -1;
} else if (val1 > val2) {
return 1;
} else {
return 0;
}
}
}
export function sortDescMethod(prop) {
return function (obj1, obj2) {
var val1 = obj1[prop]
var val2 = obj2[prop]
if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
val1 = Number(val1);
val2 = Number(val2);
}
if (val1 < val2) {
return 1;
} else if (val1 > val2) {
return -1;
} else {
return 0;
}
}
}
vue柱状图排序功能
猜你喜欢
转载自blog.csdn.net/weixin_43173924/article/details/89374703
今日推荐
周排行