美文网首页
vue 根据数组对象里面的某个属性值进行从大到小,从小到大排序

vue 根据数组对象里面的某个属性值进行从大到小,从小到大排序

作者: 这是这时 | 来源:发表于2020-01-19 00:28 被阅读0次

vue 表格里 根据数组对象里面的某个属性值进行从大到小,从小到大排序 (vue表格日期排序)

<template>
  <div class="hello">
    <el-table :data="newList" stripe style="width: 100%">
      <el-table-column prop="data" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  computed: {
    newList() {
      /* -----------排序-------------------- */
      /* let arr = [];
      this.list.map(item => arr.push(item.data));
      function sortNum(a, b) {
        // return b - a;// 从大到小排序
        return a - b; //从小到大排序
      }
      arr.sort(sortNum);
      let arr2 = [];
      arr.forEach((v, i) => {
        this.list.forEach(res => {
          if (res.data === v) {
            arr2.push(res);
          }
        });
      });
      return arr2; // 从大到小排序 */

      /* -----------从小到大排序-------------------- */
      /* let arr = [];
      this.list.map(item => arr.push(item.data));
      arr.sort();
      let arr2 = [];
      arr.forEach((v, i) => {
        this.list.forEach(res => {
          if (res.data === v) {
            arr2.push(res);
          }
        });
      });
      return (this.list = arr2);//从小到大排序 */

      /* ---------根据某个属性值排序1--------------------- */
      /*  function compare(prop) {
        return function(a, b) {
          let v1 = a[prop];
          let v2 = b[prop];
          // return v1 - v2;//从小到大排序
          return v2 - v1; // 从大到小排序
        };
      }
     return  this.list.sort(compare("data")); */

      /* ---------根据某个属性值排序2--------------------- */
      // return this.list.sort((a, b) => { return b.data - a.data });/* 从大到小排序 */
      return this.list.sort((a, b) => { return a.data - b.data });/* 从小到大排序 */
    }
  },
  data() {
    return {
      list: [
        { name: "zs3", data: "20200110", age: 10 },
        { name: "zs6", data: "20200113", age: 13 },
        { name: "zs2", data: "20200109", age: 9 },
        { name: "zs8", data: "20200115", age: 15 },
        { name: "zs4", data: "20200111", age: 11 },
        { name: "zs1", data: "20200108", age: 8 },
        { name: "zs7", data: "20200114", age: 14 },
        { name: "zs5", data: "20200112", age: 12 }
      ]
    };
  }
};
</script>




相关文章

网友评论

      本文标题:vue 根据数组对象里面的某个属性值进行从大到小,从小到大排序

      本文链接:https://www.haomeiwen.com/subject/hpwlzctx.html