layui table问题?

2023-07-01 255 0

请问table.render,在后端接口还没请求到时,能阻止渲染嘛?现在是这样的,进入页面加载表格数据,但是接口很慢,这时候页面有查询按钮,比如我查询了今天的数据,就会再次重载表格。但是,前面初始化的接口太慢了,导致新查询的已经渲染好了,过了十来秒,初始化的表格数据反而覆盖了查询的数据,这该怎么解决??

  1. 接口过了十多秒才响应,要排查一下接口为什么会久,太影响用户体验了
  2. 在初始数据没来之前,加个loading优化一下

阻止渲染这种方法治标不治本,建议主要还是得排查一下为什么需要十几秒

即便是排除掉执行十几秒的问题,如果你的界面不做限制,用户多次点击查询,介于后台对于不同检索条件的效率不一样,都有可能造成后发送的请求先收到了响应。

这种情况,要不你就在前一个请求加载完成之前,直接给搜索按钮禁用掉,要不就加一个灵活的 🔒

let globalState = {
  state: '',
  update (state) {
    state = state || Math.random()
    this.state = state
    return this.state
  },
  check (state) {
    return !this.state || this.state === state
  },
  get () {
    return this.state
  },
}
function renderTable (state) {
  if (globalState.check(state)) {
    table.render()
  }
}
function search () {
  const newState = globalState.update()
  axios.post().then(v => {
    // 搜索请求
    renderTable(newState)
  })
}
// 首次
renderTable();

以上面的例子为例,首次加载页面时 globalState.state 肯定是空的,这时候如果没有点过其他搜索条件,在调用到 renderTable 时也是可以正常渲染的。

在搜索前生成一个新的 state,在响应后再把对应的 state 传过去进行比较,就能保证始终是最后一个请求调用的 table.render

回答

相关文章

nuxt2部署静态化和ssr的时候访问首页先报404再出现首页为什么?
`clip-path` 如何绘制圆角平行四边形呢?
多线程wait方法报错?
VUE 绑定的方法如何直接使用外部函数?
vue2固定定位该怎么做?
谁有redis实现信号量的代码,希望借鉴一下?