一次同事发现一个bug(问题);不知道怎么解决,就叫我一起协助看看;主要的原因是,数据在增加的时候可以排序,但是数据在修改的时候无法排序。
以下图:是我模拟的一些数据,然后复现的这个问题:注意看效果图序号【2】【8】的金额变化
分析功能
- 在点击增加按钮的时候随机生成一个id(1-20)
- 然后去查询数组中是否有这个id,如果有就增加;反之修改金额
- 增加或者修改金额以后页面需要根据金额大小排序
复现代码
小伙伴们如果将这个代码复制到vue2中,那么就会复现以上图片的效果;
<template>
<div class="mall">
<div class="mall-head">
<el-button type="danger" @click="add">危险按钮</el-button>
</div>
<div class="mall-table">
<el-table
:data="tableData"
style="width: 100%"
:default-sort="{ prop: 'money', order: 'descending' }"
>
<el-table-column prop="id" label="序号" sortable width="180">
</el-table-column>
<el-table-column prop="money" label="金额" sortable width="180">
</el-table-column>
<el-table-column prop="describe" label="描述" sortable width="180">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
tableData: [],
};
},
methods: {
// 增加
add() {
let randNum = Math.floor(Math.random() * 10) + 1;
let money = Math.floor(Math.random() * 1000) + 1;
if (this.tableData.length) {
const index = this.tableData.findIndex((oi) => oi.id == randNum);
if (index !== -1) {
this.tableData[index]["money"] = money;
} else {
this.tableData.push({
id: randNum,
money,
describe: "**用户向你赞赏了**",
});
}
} else {
this.tableData.push({
id: randNum,
money,
describe: "**用户向你赞赏了**",
});
}
},
},
};
</script>
解决方案
将修改数据的方法改为$set的方法。
- 切记:
在修改数据的时候,页面是更新了的;我们很多时候使用vue2中的$set时是因为我们在修改了数据,但是页面没有更新,我们都知道在vue2中数据双向绑定是通过Object.defineProperty()方法进行劫持,然后动态去修改数据的;当然我们在修改对象的时候也可能存在监听不到,导致数据修改了,页面没有渲染的原因;所以官方给了我们一个set方法;这儿仅限于是未渲染的时候;但是我们去修改的时候是渲染了的,只是为排序而已
// this.tableData[index]["money"] = money; // 替换为
this.$set(this.tableData,index,{...this.tableData[index],money});
解决思路
- 在测试的过程中发现,增加数据时可以进行正确的排序
- 在测试时发现,修改值时不能进行排序
- 当时想的是修改不能排序可能需要用到$set;但是set是针对不渲染的问题,然后又想到如果是element做了一些处理呢?所以就尝试了一下;没有到成功了
完成代码
<template>
<div class="mall">
<div class="mall-head">
<el-button type="danger" @click="add">危险按钮</el-button>
</div>
<div class="mall-table">
<el-table
:data="tableData"
style="width: 100%"
:default-sort="{ prop: 'money', order: 'descending' }"
>
<el-table-column prop="id" label="序号" sortable width="180">
</el-table-column>
<el-table-column prop="money" label="金额" sortable width="180">
</el-table-column>
<el-table-column prop="describe" label="描述" sortable width="180">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
tableData: [],
};
},
methods: {
// 增加
add() {
let randNum = Math.floor(Math.random() * 10) + 1;
let money = Math.floor(Math.random() * 1000) + 1;
if (this.tableData.length) {
const index = this.tableData.findIndex((oi) => oi.id == randNum);
if (index !== -1) {
this.$set(this.tableData,index,{...this.tableData[index],money});
} else {
this.tableData.push({
id: randNum,
money,
describe: "**用户向你赞赏了**",
});
}
} else {
this.tableData.push({
id: randNum,
money,
describe: "**用户向你赞赏了**",
});
}
},
},
};
</script>
以上是一个在工作中遇到的一个小问题,如果你也遇到此类的问题,那么可以做一个参考。
今天的分享就到这儿了!由此有好的问题再与大家分享
往期文章
原文链接:https://juejin.cn/post/7217731723508875325 作者:雾恋