标签：objData const 表格 渲染 dataList 查询 chunkStep tableDataObj queryProcess

需求：页面上方有许多标签，每点击一个标签或者取消一个标签都会调用接口查询数据，渲染到表格中。

问题1：当数据较多时，表格渲染的比较慢

问题2：当点击过快时，可能标签1对应的接口的返回数据1还没返回的时候，又点击了标签2，对应的接口返回的数据2返回开始渲染，数据2渲染一半时，数据1也回来了也开始渲染，导致表格渲染的数据不准确，可能只有一部分2，也可能有一部分2也有一部分1

解决1:可以先将表格的一部分数据渲染出来，然后慢慢添加，核心代码：

const chunkData = this.getChunk(objData.dataList)
let chunkStep = 0
this.tableDataObj.dataList.push(...chunkData[chunkStep])
chunkStep++
this.queryProcess = setInterval(() => {
    if (chunkData[chunkStep]) {
      this.tableDataObj.dataList.push(...chunkData[chunkStep])
      chunkStep++
    } else {
      clearInterval(this.queryProcess)
      this.queryProcess = 0
    }
}, 200)

getChunk (arr) { // 获取分隔后的数据集合
  const stepArr = [0, 0.05, 0.1, 0.3, 0.6, 1]
  const arrLen = arr.length
  return Array.from({ length: 5 }, (ignore, i) => arr.slice(Math.ceil(arrLen * stepArr[i]), Math.ceil(arrLen * stepArr[i + 1])))
}

解决2：每次点击都用一个时间戳标记，每次只渲染对应的时间戳的数据，否则返回，时间戳1 timesTamp赋值给this.lastGetTableDateTimesTamp，时间戳2timesTamp也赋值给this.lastGetTableDateTimesTamp。当时间戳1对应的数据返回时，this.lastGetTableDateTimesTamp已被修改，对应不上，直接return不再渲染数据1，只渲染数据2，核心代码：

const timesTamp = new Date()
this.lastGetTableDateTimesTamp = timesTamp
try {
    const res = await this.$http.post(url, params)
    if (this.lastGetTableDateTimesTamp !== timesTamp) {
      return
    }
}

全部代码：

//查询表格数据
async queryData (flag) {
  const timesTamp = new Date()
  this.lastGetTableDateTimesTamp = timesTamp
  this.initStatusTagsPanel()
  if (!flag) {
    this.searchwordCur = this.keyword
  }
  const url = this.api.claimCustomer.queryData
  const batch = 0
  const keyword = this.keyword
  const pageIndex = this.withPage.pageIndex
  const pageSize = this.withPage.pageSize
  const queryFields = this.queryFields
  const tags = this.tags
  const order = this.order
  //获取可见公共库
  // const publicStorageIds = this.timeAndId.IdArray
  let params = {
    batch,
    keyword,
    pageIndex,
    pageSize,
    queryFields,
    order,
    tags
    // publicStorageIds
  }
  try {
    this.loading = true
    const res = await this.$http.post(url, params)
    if (!this.haveLabel) {
      await this.getLimitTime()
    }
    if (this.lastGetTableDateTimesTamp !== timesTamp) {
      return
    }
    let objData = {}
    if (res.data && res.data.code === 200 && res.data.data) {
      objData = await common.handleData(this.timeAndId, res.data.data)
    } else {
      objData = { dataList: [] }
    }
    this.loading = false
    this.haveLabel = false
    if (objData.dataList.length) {
      if (this.queryProcess) {
        clearInterval(this.queryProcess)
        this.queryProcess = 0
      }
      //表格置空
      this.tableDataObj = {}
      this.tableDataObj.dataList = []
      //添加内容
      this.tableDataObj.pageIndex = objData.pageIndex || 0
      this.tableDataObj.pageSize = objData.pageSize || 0
      this.tableDataObj.total = objData.total || 0
      const chunkData = this.getChunk(objData.dataList)
      let chunkStep = 0
      this.tableDataObj.dataList.push(...chunkData[chunkStep])
      chunkStep++
      this.queryProcess = setInterval(() => {
        if (chunkData[chunkStep]) {
          this.tableDataObj.dataList.push(...chunkData[chunkStep])
          chunkStep++
        } else {
          clearInterval(this.queryProcess)
          this.queryProcess = 0
        }
      }, 200)
    } else {
      this.tableDataObj = objData
    }
  } catch (e) {
    this.common.handleError(e, this)
    this.loading = false
    this.haveLabel = false
  }
},
//拆分数据
getChunk (arr) { // 获取分隔后的数据集合
  const stepArr = [0, 0.05, 0.1, 0.3, 0.6, 1]
  const arrLen = arr.length
  return Array.from({ length: 5 }, (ignore, i) => arr.slice(Math.ceil(arrLen * stepArr[i]), Math.ceil(arrLen * stepArr[i + 1])))
},

标签：objData,const,表格,渲染,dataList,查询,chunkStep,tableDataObj,queryProcess
来源： https://www.cnblogs.com/yangAL/p/10525042.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。