表格数据深拷贝以及select赋值后无法选中等问题总结

最冷一天.

已于 2023-07-12 10:25:55 修改

阅读量200

点赞数

分类专栏：工作经验文章标签： vue.js 前端

于 2023-06-28 11:46:29 首次发布

本文链接：https://blog.csdn.net/m0_61603704/article/details/131433718

版权

工作经验专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章讲述了在前端开发中遇到的三个问题及解决方案：1)在修改弹窗中，通过深拷贝防止未确定时表格数据即时更新；2)解决select下拉框赋值后无法修改的问题，采用$nextTick和$forceUpdate强制刷新；3)在a-table中为每条数据添加唯一key，利用扩展运算符简化代码冗余。

摘要由CSDN通过智能技术生成

情景一：在修改弹窗中修改表格数据的时候，还没点击确定，表格的数据就会随着弹窗中的数据变化而变化

解决方案：在点击修改按钮，给弹窗赋值的时候，对数据进行深拷贝

    // 修改    tags 为点击列的表格数据
    modifySingle (tags) {
      this.formState = JSON.parse(JSON.stringify(tags))
      this.formVisible = true
    },

情景二：select 下拉框，赋值后就无法修改的问题

解决方案：深层渲染问题，强制刷新页面即可，在 select 的 change 事件中，添加如下代码

    change () {
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    }

情景三：使用 a-table 时，每一条表格数据需要还有一个不同的 key 参数，后台返回的表格数据本身不带有 key 这个参数，需要前端处理，对每一条表格数据加上 key

之前冗余的写法：需要什么参数，都需要在代码中新增，而且代码太过冗余

          for (let i = 0; i < res.rows.length; i++) {
            this.tableData.push({
              key: i,
              id: res.rows[i].id,
              enterpriseName: res.rows[i].enterpriseName,
              checkInTime: res.rows[i].checkInTime,
              endGradTime: res.rows[i].endGradTime,
              checkInState: res.rows[i].checkInState,
              phone: res.rows[i].phone,
              managePerson: res.rows[i].managePerson,
              isLead: res.rows[i].isLead,
              personCourseNum: res.rows[i].personCourseNum,
              personMasterNum: res.rows[i].personMasterNum,
              personDoctorNum: res.rows[i].personDoctorNum,
              personOtherNum: res.rows[i].personOtherNum,
              knowPatentNum: res.rows[i].knowPatentNum,
              knowSoftnessNum: res.rows[i].knowSoftnessNum,
              knowTrademarkNum: res.rows[i].knowTrademarkNum,
              leadPicUrl: res.rows[i].leadPicUrl
            })
          }

解决方案：使用扩展运算符，给每条数据拼接一个 key

      this.tableData = res.rows
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i] = { ...this.tableData[i], key: i }
          }