vue2中使用element表格实时更新数据并排序时不生效

一次同事发现一个bug(问题);不知道怎么解决,就叫我一起协助看看;主要的原因是,数据在增加的时候可以排序,但是数据在修改的时候无法排序。

以下图:是我模拟的一些数据,然后复现的这个问题:注意看效果图序号【2】【8】的金额变化

vue2中使用element表格实时更新数据并排序时不生效

分析功能

  • 在点击增加按钮的时候随机生成一个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 作者:雾恋

(0)
上一篇 2023年4月4日 上午10:15
下一篇 2023年4月4日 上午10:25

相关推荐

发表评论

登录后才能评论