专栏首页人生代码bug 回忆录(四)

bug 回忆录(四)


@author Ken @time 2020-09-27 21:30:59 @description 转载请备注出处,谢谢


bug 回忆录(四)

大家好,我是 Ken,人贱人爱的前端小 Ken,我的公众号是 前端小Ken,今天我要告诉你一个严重的问题,我发现这个奇怪的 bug,内心一万个草泥马在空中飘过,顿时心里害怕,菊花一紧:

最后我还是怂了,不得不好好认真的对待 bug。

每天一个 bug,真是应验了那句,bug 虐我千万遍,我待 bug 如初恋。

今天又是什么 bug 呢?

最近的接触了一个 svn 升级文档页面的需求:当列表查询出来之后要根据表格数据每一行的数据的 exportNumber 如果为 0 则选中,不为 0 则不选中。我想这还不简单?

经过分析,这他呀的不就是跟回显数据有点类似?有点开心

然后一顿搜索之后,出现了列表,发现一点反应都没有,一点反应都没有,what the funk? what happen? 不可能啊,一脸懵逼状态中。

我们的代码是这样处理的

搜索触发 search 方法:

/**
 * 描述
 * @date 2020-09-27
 * @description 实现搜索功能
 * @returns {undefined}
 */
search() {
  let param = JSON.parse(JSON.stringify(this.searchParams));
  param.projectNameList = param.projectNameList.toString();
  Object.assign(this.pageForm, param);

  this.searchResultParams = {
    dataInfo: JSON.parse(JSON.stringify(this.searchParams)),
    fields: this.ufd.fields,
  };
  let rv = this.onSubmit(true);
  rv !== false &&
    XM.storage.set(this.$options.name + ".sp", this.searchParams);
},

我们的请求是这样的:

/**
 * 描述
 * @date 2020-09-27
 * @param {any} isInitPages
 * @description isInitPages 是否初始化当前页码 true: 初始化为1,  false:不初始化,使用当前页码
 *  点查询时初始化当前页码, 如果不初始化,当查询出的结果集页码小于当前页码时,页码显示不正确
 * @returns {any}
 */
onSubmit(isInitPages) {
  this.pageForm.current = isInitPages ? 1 : this.pageForm.current;
  this.loading = true;
  XM.ajax.get
    .call(this, this.url, this.pageForm)
    .then((res) => {
      this.dataList = res.data.data;
      this.dataList.map((row, index) => {
        if (row.exportNumber == 0) {
          this.tempSelectResultPageDataList.push(this.dataList[index]);
          this.tempSelectResults.push(this.dataList[index]);
          this.$refs.multiTable.$refs.table.toggleRowSelection(
            this.dataList[index],
            true
          );
        }
      });
      this.pageForm.total = res.data.data.length;
    })
    .catch((err) => {
      this.loading = false;
      this.$_consoleUtils.err(err);
      this.$message.error("[" + err.status + "]" + err.msg);
    });
},

经过一顿分析之后,我们发现是因为我们的数据请求返回的时间与组件生命周期冲突的原因,为什么呢?如果数据请求比较慢,或者数据量大的情况下,你会发现,组件生命周期已经走完了,但是数据依然还没过来,所以当数据过来之后,他是不会相应到页面上去的,因此我们做了如下处理:

我们将 onSubmit 方法的处理:

this.dataList.map((row, index) => {
  if (row.exportNumber == 0) {
    this.tempSelectResultPageDataList.push(this.dataList[index]);
    this.tempSelectResults.push(this.dataList[index]);
    this.$refs.multiTable.$refs.table.toggleRowSelection(
      this.dataList[index],
      true
    );
  }
});

放在 $nextTick 里面:

this.$nextTick(() => {
  this.dataList.map((row, index) => {
    if (row.exportNumber == 0) {
      this.tempSelectResultPageDataList.push(this.dataList[index]);
      this.tempSelectResults.push(this.dataList[index]);
      this.$refs.multiTable.$refs.table.toggleRowSelection(
        this.dataList[index],
        true
      );
    }
  });
})

这样,我们的初始化选中就生效了,如下图:

当然还有一种操作就是 element-ui 官网的实现,比如我们一开始选中了一些 checkbox 多选框,后面我们下拉表格重新加载数据的时候,表格会被重新渲染一遍,会导致我们之前选中的 checkbox 多选框,又被默认渲染为没选的状态,这就很纳闷了,如果不看官网是很难实现的,

请看官网的截图:

我们发现 el-table 有一个属性 :reserve-selection="true",同时这个属性必须要结合 row-key 这个属性一起使用才有效果。

我们的表格是二次封装了 el-table 代码如下:

<fy-table
  :default-sort="{prop: 'modifiedTime', order: 'ascending'}"
  :reserve-selection="true"
  :table-data="dataList"
  :total="pageForm.total"
  @load-more="loadMore"
  @select-all="selectAll"
  @selection-change="selectionChange"
  fullScreen
  ref="multiTable"
  row-key="upgradeDocId"
  v-loading="loading"
>
  <el-table-column :width="100" type="selection"></el-table-column>

</fy-table>

因此我们就这样解决了这个 bug

本文分享自微信公众号 - 志学Python(lijinwen1996329ken),作者:志学Python

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-09-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 你绝对不知道 Vue 也有生老病死

    从今天开始我们开始学习 Vue 生命周期钩子,就像人的一生一样短暂,充满着未知情况,从一开始的出生,小孩,少年,青年,中年,晚年,直到死亡那刻来临,每一个阶段都...

    公众号---人生代码
  • Vue 3 计算属性和侦听器

    我们都知道,模板内的表达式计算是非常便利的,但是如果涉及到非常复杂的计算方式,一个结算结果如果依赖很多个变量,就会变得难以维护了,所以计算属性就此应运而生了。

    公众号---人生代码
  • Vue 3 选项 API

    其实我们经常使用到组件里面的数据,而这些数据是定义在 data 对象函数里面的,为什么要实现定义在 data 对象函数里面呢?在 data 对象函数中的数据,V...

    公众号---人生代码
  • 确认过眼神,你是喜欢Stream的人

    用户2145235
  • VUE+WebPack游戏设计:欲望都市城市图层的设计

    望月从良
  • 云终端系列(一)—— 实时音视频Web端接入体验(Vue基础音视频通话篇)

    这个系列呢,主要给各位观众老爷看看目前有较大趋势的SaaS应用的SDK在各种主流Web终端的使用姿势和异常分析,如果想要纯粹了解开发的或者云原生,云开发的可以去...

    楚歌
  • 社区开源框架网络模块:ConnectionManager详解

    地址:https://github.com/Golangltd/LollipopCreator

    李海彬
  • three.js 郭先生制作太阳系

    今天郭先生收到评论,想要之前制作太阳系的案例,因为找不到了,于是在vue版本又制作一版太阳系,在线案例请点击three.js制作太阳系(加载时间比较长,请稍等一...

    郭先生的博客
  • 确认过眼神,你是喜欢Stream的人

    摘要:在学习Node的过程中,Stream流是常用的东东,在了解怎么使用它的同时,我们应该要深入了解它的具体实现。今天的主要带大家来写一写可读流的具体实现,就过...

    用户2145235
  • 闪屏还可以这样玩

    对于多数应用来说,在进入APP的时候使用短暂的闪屏广告来吸引用户是很常见的一个场景。但随着这种模式的频繁应用,越来越多的用户会感到审美疲劳,甚至不看就跳过闪屏了...

    林焕彬

扫码关注云+社区

领取腾讯云代金券