最近碰到一面试题给了一个请求接口，没有分页，一共一万条数据，并且让前端渲染在页面上，这个场景一般在实际应用场景不多见，一般后端都会设置分页查询，但是面试官考的就是前端对于大量数据的处理能力。

<!DOCTYPE html>
<html>
 
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
</head>
 
<body>
  <div id="root">
    <search />
  </div>
 
  <script type="text/babel">
    //列表数据接口: http://apicloud.mypaas.com.cn/mockview/appdesign?path=%2Fapi%2Flistdata&api=%2Fapi%2Flistdata
 
    //列表数据搜索
    var Search = { 
      //TODO
      data(){
        return {
          serarchWord: '',
          listData: [],
        }
      },
      mounted(){
        this.debounceSearch =  this.debounce(this.getData, 800)
      },
      methods: {
        // 获取数据
        getData(){
          axios({
            url: 'http://apicloud.mypaas.com.cn/mockview/appdesign?path=%2Fapi%2Flistdata&api=%2Fapi%2Flistdata',
            method: 'GET',
            params: {
              keyWord: this.serarchWord
            }
          }).then(res=>{
            // this.listData = res.data.data
            let data = res.data.data
           // 数据分组
            let groupData = this.group(data)
            // 将分组后的数据依次插入页面
            for(let i=0;i<groupData.length;i++){
              setTimeout(() => {
                this.listData.push(...groupData[i])
              }, 1000 * i);
            }
          })
        },
        // 数据分组[[1,...,1000],...,[1,..,1000]]
        group(data) {
          var result = [];
          var groupItem;
          for (var i = 0; i < data.length; i++) {
            if (i % 1000 == 0) {
              groupItem != null && result.push(groupItem);
              groupItem = [];
            }
            groupItem.push(data[i]);
          }
          result.push(groupItem);
          // console.log('result',result)
          return result;
        },
        inputChange(){
          this.debounceSearch()
        },
        // 防抖（setTimeout 函数)
        debounce(fn, wait){
          var timeout = null;
          return function() {
            if(timeout !== null) 
              clearTimeout(timeout);
              timeout = setTimeout(fn, wait);
          }
        }
      },

      template: `
        <div>
          <input v-model="serarchWord" @input="inputChange"/>  
          <ul>
            <li v-for="(item, index) in listData" :key="item.id">{{item.title}}</li>  
          </ul>
        </div>
      `
    }
 
    new Vue({
      el: '#root',
      components: {
        'search': Search
      }
    })
  </script>
</body>
 
</html>
```js
**代码解释：**

1、考虑到模糊搜索，添加防抖函数

2、考虑到数据量太大，将数据分组插入页面

 

————————————————
版权声明：本文为CSDN博主「兰亭古墨」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hefeng6500/article/details/99753271
# vue.js # 前端 # elementui
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue