js数组、数组嵌套根据某个字段排序(eachart图标双击事件、vue双击)
1.根据某个字段排序var arr = [{name:'张三',age:15},{name:'李四',age:18},{name:'王五',age:28}];function compare(property){return function(a,b){var value1 = a[property];var value2 = b[property];return value1 - value2;
·
1.根据某个字段排序
var arr = [
{name:'张三',age:15},
{name:'李四',age:18},
{name:'王五',age:28}
];
function compare(property){
return function(a,b){
var value1 = a[property];
var value2 = b[property];
return value1 - value2; //降序只需要 return value2- value1
}
}
console.log(arr.sort(compare('age')))
2.根据某两个字段排序
方法中只需要传两个字段
var arr = [
{name:'张三',age:15,num:13},
{name:'李四',age:15,num:16},
{name:'王五',age:28,num:18},
{name:'木子李',age:18,num:18}
];
compare (property, p2) {
return function (a, b) {
var value1 = a[property];
var value2 = b[property];
if (value1 != value2) {
return value1 - value2;
} else {
return a[p2] - b[p2];
}
}
}
console.log(arr.sort(compare('age','num')))
3.嵌套数组排序
需求:单击看选项详情,双击查看ABCD的排序
tips:在vue
中是提供了双击事件 dblclick
的,所以我们可以在同一元素上可以绑定单击和双击,在我之前的项目需求是:点击eachart饼图扇是展示详情,双击是按选项排序,实现核心代码:
let TimeFn = null;
_this.myChartzu.on('click', (params) => {
clearTimeout(TimeFn);
//执行延时
TimeFn = setTimeout(() => {
//do function在此处写单击事件要执行的代码
let objCode = {
dialogVisible: true,
unitCode: params.seriesId,
cureentQnTitleCode: _this.cureentQnTitleCode,
queryMethods: 'byUnitCode',
// qnCode:this.tableData.qnCode
}
if (this.unitTypeCode <= 7000) {
_this.$emit('emitShowDialogTwo', objCode)
} else {
this.$message.info('已经到最底层了,不能再点了!')
}
}, 200);
});
//双击排序
_this.myChartzu.on('dblclick', (params) => {
clearTimeout(TimeFn);
let currentName = params.name
let index = -1
this.tableData[0].items.forEach((item, idx) => {
if (currentName == item.content) {
index = idx
}
})
针对vue中的dblclick
事件单独做了个demo
html
<ul class="ul">
<li v-for="qn in arr" :key="qn.code">
<h2>{{ qn.name }}</h2>
<div
class="items"
v-for="item in qn.items"
:key="item.area"
@click.stop="click(item)"
@dblclick.stop="sortC(item)"
>
<a href="#"> 选项:{{ item.area }} 得分:{{ item.order }} </a>
</div>
</li>
</ul>
data数据:
arr: [
{
"code": "10001",
"name": '1.足球',
"items": [
{
"area": "A",
"order": 8
},
{
"area": "B",
"order": 9
},
{
"area": "C",
"order": 10
}, {
"area": "D",
"order": 11
},
]
},
{
"code": "10003",
"name": '2.篮球',
"items": [
{
"area": "A",
"order": 15
},
{
"area": "B",
"order": 13
},
{
"area": "C",
"order": 18
}, {
"area": "D",
"order": 6
},
]
},
{
"code": "10002",
"name": '3.乒乓球',
"items": [
{
"area": "A",
"order": 23
},
{
"area": "B",
"order": 20
},
{
"area": "C",
"order": 19
}, {
"area": "D",
"order": 21
},
]
}
]
方法:methods
click (item) {
clearTimeout(time); //首先清除计时器 在script里面定义let time = null;
time = setTimeout(() => {
//定时器里面处理事件
console.log(item);
console.log('单击');
}, 300); //大概时间300ms
},
sortC (q) {
clearTimeout(time); //清除
console.log('双击');
let index = -2
this.arr[0].items.forEach((item, idx) => {
//因为arr下面的都是ABCD就直接取的第一个数组遍历找出对应的idx
console.log(item);
if (q.area == item.area) {
index = idx
}
})
console.log(index);
if (index != -2) {
this.arr = this.arr.sort((a, b) => b.items[index].order - a.items[index].order)
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)