vue3.0版本下动态修改表格数据

最新推荐文章于 2024-08-23 20:23:30 发布

weixin_41971121

最新推荐文章于 2024-08-23 20:23:30 发布

阅读量2.2k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_41971121/article/details/119323167

版权

先描述一下我的需求：

页面中有两个table（表1，表2），两张表的数据类似，但表2不是所有情况下都填入数据。当表2需要输入时，有一个字段需要和表1的字段联动。

踩坑：

基本上找到方法都是用this.$set或者Vue.set，但是在3.0的版本下官方并没有贴出这个原生方法的API。我使用这个函数后浏览器报错

代码应该是没有写错 ,如果有问题欢迎指教

seedingNumChange (targetRow) {
      var index = this.seedingForm.returnTableValue.indexOf(row => row.itemCode === targetRow.itemCode)
      var updateRow = this.seedingForm.returnTableValue.filter(row => row.itemCode === targetRow.itemCode)
      console.log(this.seedingForm.seedingTableValue)
      updateRow.seedingItemNum = targetRow.itemNum
      this.$set(this.seedingForm.returnTableValue[0], 'seedingItemNum', targetRow.itemNum)
    }

花费一上午看了官方文档（也是随便瞎看），一开始以为是我对set的用法不对，后来觉得应该是vue版本问题。最后找到了官方文档中对数组更新检测的方法：https://v3.cn.vuejs.org/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95

虽然没有详细写每个函数的使用方法，但是也算是给出了一条路，这次主要是用了splice()这个函数，具体可以自行查找，贴出最后的使用方法

seedingNumChange (targetRow) {
      var index = this.seedingForm.returnTableValue.indexOf(row => row.itemCode === targetRow.itemCode)
      var updateRow = this.seedingForm.returnTableValue.filter(row => row.itemCode === targetRow.itemCode)
      console.log(this.seedingForm.seedingTableValue)
      updateRow[0].seedingItemNum = targetRow.itemNum
      // splice(index, length, value)
      // index：需要修改/删除的数组起始下标
      // length：需要修改/删除的数组长度
      // value：替换的值（删除的话value为空，但是本人没有尝试过，有需要可以试试给空值或者直接不写这个参数）
      this.seedingForm.returnTableValue.splice(index, 1, updateRow[0])
    }