vue 下拉框select的的分段加載解決數據過大導致頁面卡頓

上篇文章介紹了select的無限加載解決方案！本篇介紹select分段加載方案

直接上代碼時候filter方法過濾出自己需要的數組對象數據出來

 

      dataName: "", //活動名稱/權益名稱

      interestsNames: [], // 權益名稱下拉數組

      activityNames: [], // 活動名稱下拉數組

      // 渲染列表，限制在20個以內

      activityList: [],

 

    //解決 element-ui 下拉框過多導致卡頓問題

    //將獲取的數據（activityNames）和渲染數據（activityList）分離開，限制渲染數組的長度

    filterList(query) {
      if (!query) {
        this.activityList = this.activityNames.slice(0, 100)
      } else {
        let result = []                                                        //存儲符合條件的下拉選項
        this.activityNames.forEach(val => {
          if (val.data_value.indexOf(query) != -1) result.push(val)
        })
        this.activityList = result.slice(0, 100)                                 //只取前100個
      }
    },

    //權益名稱/活動名稱

    activity_sceneNameData() {
      let that = this;
      if (that.title === "彈窗/Banner業務轉化分析") {
        that.dataName = "";
        that.activityNames = [];
        // that.$http.get(SERVERURL.activityNameData)
        request.activityNameData().then((res) => {
          that.activityNames = res.data
          console.log(res.data.length)
          that.activityList = that.activityNames.slice(0, 100)
        })
      } else {
        that.dataName = "";
        that.interestsNames = [];
        // that.$http.get(SERVERURL.interestsNameData)
        request.interestsNameData().then((res) => {
          that.interestsNames = res.data
        })
      }
    },

 下篇：驗證金額正則表達式（小位數校驗，千位逗號分隔字符串）；若有幫助請關注！！！