• 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>
  • 相关阅读:
    项目开源-基于ASP.NET Core和EF Core的快速开发框架
    YoyoGo使用指南
    使用SpringSecurity Oauth2.0实现自定义鉴权中心
    Go语言系列之手把手教你撸一个ORM(一)
    记一次容器CPU高占用问题排查
    Spring Boot系列 八、集成Kafka
    Spring Boot系列:七、 实现Mybatis多数据源切换
    SpringBoot系列:六、集成Swagger文档
    MyBatis系列:二、配置文件详解
    MyBatis系列:一、入门
  • 原文地址:https://www.cnblogs.com/cyycyhcbw/p/13396946.html
Copyright © 2020-2023  润新知