js：对数据进行排序渲染

比如某些数据需要按照一定的顺序全部展示出来，但是后端接口返回的数据中只包含其中的一部分可能是2个也可能是3个，这个时候需要优先展示接口中的数据，然后剩余的按照原来默认的顺序进行展示。

 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    .menu {
      border: #000000 solid 1px;
      height: 100px;
      width: 100px;
      display: inline-block;
    }

    .red {
      background-color: red;
    }
  </style>
</head>

<body>

  <div id="app">
    <ul>
      <!-- 先展示返回来的数据，再展示没有返回来的数据即可 -->
      <li v-for="item in interfaceMenu" class="menu red">
        {{item.name}}
      </li>
      <li v-for="item in list" class="menu">
        {{item.name}}
      </li>
    </ul>

    <input type="button" value="按钮" @click="renderData" />
  </div>

  <script>
    var app = new Vue({
      el: "#app",
      data: {
        // muenList是所有的数据，并按照顺序排列
        // interfaceMenu是后端返回来的数据
        // list用于按照顺序存储没有被返回的数据
        menuList: [
          { id: 1, name: "1", flag: false },
          { id: 2, name: "2", flag: false },
          { id: 3, name: "3", flag: false },
          { id: 4, name: "4", flag: false },
          { id: 5, name: "5", flag: false },
        ],
        interfaceMenu: [{ id: 2, name: "2" }, { id: 4, name: "4" }],
        list: [],
      },
      methods: {
        // 对比全部列表数据和返回来的数据，然后没有在返回接口内的数据添加到list新列表中
        renderData: function () {
          let map = {}
          this.interfaceMenu.forEach(row => {
            map[row.id] = row
          })

          for (var i = 0; i < this.menuList.length; i++) {
            if (!map.hasOwnProperty(this.menuList[i].id)) {
              this.list.push(this.menuList[i])
            }
          }
          console.log(this._uid)
          // 排序  如果本身列表没有排序的话，可以采用下面的方法 进行升序或者倒序的排列
          // this.list.sort((a,b)=>a.id-b.id)    
          // this.interfaceMenu.sort((a,b)=>a.id-b.id)
        }
      }
    })
  </script>
</body>

</html>

 

posted @ 2020-07-29 14:30  葡萄想柠檬  Views(1190)  Comments(0)  Edit  收藏  举报
目录代码