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。