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)
      }
    },
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐