标签:获取 load 页面 mcu 也有 false mat his slice
需求:页面上方有许多标签,每点击一个标签或者取消一个标签都会调用接口查询数据,渲染到表格中。
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])))
}
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])))
},
标签:获取 load 页面 mcu 也有 false mat his slice
原文地址:https://www.cnblogs.com/yangAL/p/10525042.html